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INTRODUCTION 


W elcome to Learn HTML and CSS with w3schools. This book is for Web users learn¬ 
ing to create their own Web pages using HTML, the standard tagging language for 
the World Wide Web. 

w3schools (www.w3schools.com) is one of the top Web destinations to learn HMTL and 
many other key Web languages. w3schools’ tutorials are recommended reading in more 
than 100 universities and high schools all over the world. This book is a great companion 
to the HTML and CSS tutorials on the w3schools site, which were written by Hege Ref- 
snes, Stale Refsnes, Kai Jim Refsnes, and Jan Egil Refsnes. 

Like the w3schools online tutorials, this book features a brief presentation of each topic, 
trading lengthy explanations for abundant examples showcasing each key feature. This 
book, as well as other w3schools books published by Wiley, features straightforward and 
concise tutorials on each topic from which the beginning Web developer can easily learn. 
All of the book’s content is derived from w3schools’ accurate, user-tested content used by 
millions of learners every month. 


HTML 

With HTML, you can create your own Web site. HTML is the core technology in which 
all Web pages are written. This tutorial teaches you everything about HTML. HTML is 
easy to learn—you will enjoy it. 

What You Should Already Know 

Before you continue, you should have a basic understanding of how to use a browser to 
view pages on the Web. 

If you want to study these subjects first, please read The Lnternet For Dummies, 12th Edi¬ 
tion, also from Wiley Publishing. 


What is HTML? 

HTML is a language for describing Web pages. 

►► HTML stands for HyperText Markup Language. 

►► HTML is not a programming language, it is a markup language. 
►► A markup language is a collection of markup tags. 

►► HTML uses markup tags to describe Web pages. 
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What are Tags? 

►► HTML markup tags are usually called HTML tags or just tags. 

►► HTML tags are keywords surrounded by angle brackets like <html>. 

►► HTML tags normally come in pairs, like <b> and </b>. 

►► The first tag in a pair is the start tag; the second tag is the end tag. 

►► Start and end tags are also called opening tags and closing tags. 

HTML Documents = Web Pages 

►► HTML documents describe Web pages. 

►► HTML documents contain HTML tags and plain text. 

►► HTML documents are also called Web pages. 

The purpose of a Web browser (like Internet Explorer or Mozilla Firefox) is to read 
HTML documents and display them as Web pages. The browser does not display 
the HTML tags, but uses the tags to interpret the content of the page. In your 
browser, it looks like figure 1.1. 

<html> 

<body> 

<hl>My First Heading</hl> 

<p>My first paragraph</p> 

</body> 

</html> 

In the previous code example, 

►► The text between <html > and </html > describes the Web page. 

►► The text between <body> and </body> is the visible page content. 

►► The text between <hl> and </hl> is displayed as a heading. 

►► The text between <p> and </ p> is displayed as a paragraph. 

My First Heading 

My first paragraph 

Figure 1.1 
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Introduction 


How to Use This Book 

Throughout this book, you will see several icons: 


Try it yourself » 


The Try It Yourself icon indicates an opportunity for you to practice what you’ve just 
learned. The code and examples under this icon come from examples on the w3schools 
site, which allow you to make changes to the code and see the results immediately. You do 
not have to type the code examples in this book; you can find them all on the w3schools 
site. 


E The w3schools icon indicates that more information is available on the 
w3schools site. 



This icon indicates where you will find further information about a topic that 
is covered more thoroughly elsewhere within the book. 


NOTE 


Notes call your attention to important information you need to know 
before proceeding. 


TIP 


Tips provide you with suggested shortcuts and information to help you be 
more productive. 


This book is divided into three sections: 

►► Section I: HTML Basic 
►► Section II: HTML/CSS Advanced 
►► Section III: Appendixes 

If you’re eager to improve your Web pages and to add some interactivity, jump right 
in with HTML basics. Plenty of examples and opportunities to try things await, and 
w3schools will be right there when you need them! 
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Section I 
HTML Basic 


□ Chapter 1: HTML Getting Started 

□ Chapter 2: HTML Fundamentals 

□ Chapter 3: HTML Elements 

□ Chapter 4: HTML Attributes 

□ Chapter 5: HTML Headings, Rules, & Comments 

□ Chapter 6: HTML Paragraphs 

□ Chapter 7: HTML Text Formatting 

□ Chapter 8: HTML Styles 

□ Chapter 9: HTML Links 

□ Chapter 10: HTML Images 

□ Chapter 11: HTML Tables 

□ Chapter 12: HTML Lists 

□ Chapter 13: HTML Forms & Input 

□ Chapter 14: HTML Colors 

□ Chapter 15: HTML 4.01 Quick List 


5 



CHAPTER 1 


HTML 

GETTING STARTED 


In This Chapter 

□ What You Need 

□ HTML Editors 

□ Create Your Own Test Web 

□ .HTM or .HTML Extension? 

What You Need 

It’s simple to get started writing HTML. 

►► You don’t need any tools to learn HTML with w3schools. 

►► You don’t need an HTML editor. 

►► You don’t need a Web server. 

►► You don’t need a Web site. 

HTML Editors 

In this tutorial, we use a plain text editor (like Notepad) to edit HTML. We believe 
this is the best way to learn HTML. 

Instead of writing plain text, however, professional Web developers often prefer using 
HTML editors like FrontPage or Dreamweaver because they offer code-writing 
shortcuts and helpful features. 
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Create Your Own Test Web 

We suggest you experiment with everything you learn in this book by editing your 
Web files with a text editor (like Notepad) and opening them in Internet Explorer 
to view the results. 


To create a test Web on your own computer, just copy the following three files from 
the w3schools Web site to your desktop. 



http: / / www. w3schools. com/html/mainpage .htm 
http: / / www. w3schools. com/html/page 1. htm 
http: / / www. w3schools. com/html/page2. htm 


After you have copied the files, double-click on the file called mainpage.htm and see 
your first Web site in action. 


If your test Web contains HTML markup tags you have not learned, don’t 
panic. 


You will learn all about markup tags in the next chapters. 


.HTM or .HTML Extension? 

When you save an HTML file, you can use either the .htm or the .html extension. 
We use .htm in our examples. It is a habit from the past, when the software only 
allowed three letters in file extensions. 

In most cases, it is perfectly safe to use .html. 

E The w3schools Web site contains a wealth of helpful tools to help you 
learn HTML, including hundreds of cut-and-paste examples, an online 
text editor, an HTML Color Picker, quizzes to test your knowledge, and 
an abundance of Web-building reference tables. We recommend you 
refer to the Web site often as you work through this book, http://www. 
w3schools.com/html 
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CHAPTER 2 


HTML 

FUNDAMENTALS 


In This Chapter 

□ HTML Headings 

□ HTML Paragraphs 

□ HTML Links 

□ HTML Images 


HTML Headings 

HTML headings are defined with the <hl> to <h6> tags. The lower the number, 
the larger the heading size, as shown in Figure 2.1. 



Don’t worry if the examples use tags you have not learned. You will learn 
more about tags in the next chapters. 


Try it yourself » 


<html> 

<body> 


<hl>This is 
<h2>Heading 
<h3>Heading 


Heading l</hl> 

2 is Smaller</h2> 

3 is Smaller Sti11</h3> 


</body> 

</html> 


(continued) 
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(continued) 


This is Heading 1 

Heading 2 is Smaller 

Heading 3 is Smaller Still 

Figure 2.1 


HTML Paragraphs 

HTML paragraphs are defined with the <p> tag. Most browsers automatically put 
a line break and space after a </p> tag, as shown in Figure 2.2. 


Try it yourself » 


<html> 

<body> 

<p>This is a paragraph.</p> 
<p>This is a paragraph.</p> 
<p>This is a paragraph.</p> 


</body> 

</html> 


This is a paragraph. 
This is a paragraph. 
This is a paragraph. 

Figure 2.2 
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HTML Links 

HTML links are defined with the <a> tag, as shown in Figure 2.3. 


Try it yourself » 


<html> 

<body> 

<a href="http://www.w3schools.com">This is a link to the 
w3schools web site.</a> 

</body> 

</html> 


This is a link to the \v3 schools Web site. 


Figure 2.3 



The URL address is an attribute of the link element. You will learn about 
attributes in Chapter 4, HTML Attributes. 


HTML Images 

HTML images are defined with the <i mg> tag. It tells the browser where to find the 
image file and what size to display it, among other things. The results of this code 
example are shown in Figure 2.4. 


Try it yourself » 


<html> 

<body> 

<img src="w3schools.jpg" width= ,, 104" height= ,, 142" /> 

</body> 

</html> 
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Figure 2.4 



The source name and size of the image are attributes of the image element. 
You will learn about attributes in Chapter 4, "HTML Attributes." 
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CHAPTER 3 


HTML ELEMENTS 


In This Chapter 

□ HTML Elements 

□ HTML Element Syntax 

□ Nested Elements 

□ Don’t Forget the End Tag 

□ Empty HTML Elements 

□ Use Lowercase Tags 

HTML Elements 


HTML documents are defined by HTML elements. An HTML element is every¬ 
thing between the start tag and the end tag. The start tag is often called the opening 
tag. The end tag is often called the closing tag. 


OPENING TAG 

ELEMENT CONTENT 

CLOSING TAG 

<P> 

This is a paragraph. 

</p> 

<a href="default.htm"> 

This is a link. 

</a> 

<br/> 




HTML Element Syntax 


HTML elements follow a certain format regardless of how the element is used. 
►► An HTML element starts with a start tag/opening tag. 

►► An HTML element ends with an end tag/closing tag. 

►► The element content is everything between the start and the end tag. 

►► Some HTML elements have empty content. 

►► Empty elements are closed in the start tag. 

►► Most HTML elements can have attributes, 
b* You will learn more about attributes in Chapter 4, HTML Attributes. 
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Nested Elements 

Most HTML elements can be nested (contain or be contained within other HTML 
elements). HTML documents consist of nested HTML elements. 

The following example contains three HTML elements. Notice that the <p> 
element is nested in the <body> element, which in turn is nested in the <html> 
element. The results of these tags are shown in Figure 3.1. 

<html> 

<body> 

<p>This is my first paragraph</p> 

</body> 

</html> 


This is my first paragr^h 

Figure 3.1 

The <p> element 

The <p> element is among the most common of elements. 

<p>This is my first paragraph</p> 

►► The <p> element defines a new paragraph in the HTML document. 
►► The element has a start tag <p> and an end tag </ p>. 

►► The element content is: This is my first paragraph. 

The <body> element 

The <body> element defines the body of the HTML document. 

<body> 

<p>This is my first paragraph</p> 

</body> 
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►► The element has a start tag <body> and an end tag </body>. 

►► The element content is another HTML element (one or more paragraphs). 
There are usually dozens of elements within the body element. 


The <html> element 

The <html > element defines the entire HTML document. 

<html> 

<body> 

<p>This is my first paragraph</p> 

</body> 

</html> 

►► The element has a start tag <html > and an end tag </html >. 

►► The element content is another HTML element (the body). 

Don't Forget the End Tag 

Most browsers will display HTML correctly even if you forget the end tag. 

<p>This is a paragraph 
<p>This is another paragraph 

The previous example will work in most browsers, but don’t rely on it. Forgetting 
the end tag can produce unexpected results or errors. 


NOTE 


Future versions of HTML will not allow you to skip end tags. 
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Empty HTML Elements 

HTML elements without content are called empty elements. Empty elements can 
be closed within the start tag. 

<br> is an empty element without a closing tag. It defines a line break. 

In XML and future versions of HTML, all elements must be closed. 

Adding a slash to the end of start tag, like <b r/ >, is the proper way of closing empty 
elements, accepted by HTML, and XML. 

Even if <br> works in all browsers, writing <br/> instead is more future proof. 

Use Lowercase Tags 

HTML tags are not case sensitive: <P> means the same as <p>. Plenty of Web sites 
use uppercase HTML tags in their pages. 

w3schools uses lowercase tags because the World Wide Web Consortium (W3C) 
recommends lowercase in HTML 4. 
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CHAPTER 4 


HTML ATTRIBUTES 


In This Chapter 

□ Standard HTML Attributes 

□ Defining Attribute Values 

□ HTML Attributes Reference 

Standard HTML Attributes 

Attributes provide additional information about HTML elements. 

►► HTML elements can have attributes. 

►► Attributes provide additional information about the element. 

►► Attributes are always specified in the start tag. 

►► Attributes come in name/value pairs like: name=”val ue” . 

Defining Attribute Values 

Attribute values should always be enclosed within quotation marks. While 
“double quotes” are the most common, single-style quotes (also called primes) are 
also allowed. In some rare situations, like when the attribute value itself includes 
quotation marks, it is necessary to use primes. For example: 

name='John "Shotgun" Nelson' 

As another example, HTML links are defined with the <a> tag. The Web address, 
surrounded by quotation marks, is the value of the attribute of the link element. 
The results appear in Figure 4.1. 

<a href="http://www.w3school s. com">Thi s is a linl«/a> to the 
w3schools web site. 


This is alink to the w3schools Web site. 


Figure 4.1 
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TIP 


Attribute names and values are not case sensitive. However, the World Wide 
Web Consortium (W3C) recommends using lowercase attributes and values in its HTML 
4 recommendation. Later versions require using lowercase. 


HTML Attributes Reference 

Table 4.1 lists some attributes that are standard for most HTML elements. 


Table 4.1: Core Attributes 


Attribute 

Value 

Description 

class 

class rule or style rule 

The class of the element 

id 

id name 

A unique id for the element 

style 

style definition 

An inline style definition 

title 

tooltipjtext 

A text to display in a tool tip 


NOTE 


A specific id may only appear once in a web page, while class refers to a 
class of elements that may appear many times in the same page. 


The attributes listed in these references are standard and are supported by all HTML 
tags (with a few exceptions). A full list of legal attributes for each HTML element is 
listed in the w3schools Complete HTML Reference online at: 


2 ? 

ISB I http://www.w3schools.com/tags/default.asp 

For more information about standard attributes, see the HTML Standard Attri¬ 
butes Reference online at: 



http: / / www. w3schools. com/tags/ref_s tandardattributes. asp 


18 
























CHAPTER 5 


HTML HEADINGS, 
RULES, & COMMENTS 


In This Chapter 

□ HTML Headings 

□ HTML Rules (Lines) 

□ HTML Comments 

□ Viewing HTML Source Code 

HTML Headings 

Because users may skim your pages by their headings, it is important to use 
headings to show the document structure. Headings are defined, from largest to 
smallest, with the <hl> to <h6> tags. 

HI headings should be used as main headings, followed by H2 headings, then less 
important H3 headings, and so on. You can compare the appearance of the head¬ 
ings in Figure 5.1. 


Try it yourself » 


<hl>This 

i s 

a 

Heading 

l</hl> 

<h2>This 

i s 

a 

Heading 

2</h2> 

<h3>This 

i s 

a 

Heading 

3</h3> 

<h4>This 

i s 

a 

Heading 

4</h4> 

<h5>This 

i s 

a 

Heading 

5</h5> 

<h6>This 

i s 

a 

Heading 

6</h6> 


19 




Learn HTML and CSS with w3schools 


This is a Heading 1 

This is a Heading 2 

This is a Heading 3 
This is a Heading 4 

This is a Heading 5 
This is a Heading 6 

Figure 5.1 


Use HTML headings for headings only. Don’t use headings to make text BIG or 

bold. 

Search engines use your headings to index the structure and content of your Web pages. 


NOTE 


Browsers automatically add an empty line before and after headings. 


HTML Rules (Lines) 

The <hr/> tag is used to create a horizontal rule (line) across the browser page. 
Rules are often used to separate sections of a document, as shown in Figure 5.2, or 
to show a visual break. 


Try it yourself » 


<html> 

<body> 

<p>The hr tag defines a horizontal rule:</p> 

<hr /> 

<p>This is a paragraph</p> 

<hr /> 

<p>This is a paragraph</p> 

<hr /> 

<p>This is a paragraph</p> 
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The hr tag defines a horizontal rule: 


This is a paragraph 

This is a paragraph 

This is a paragraph 

Figure 5.2 



HTML Comments 

Comments can be inserted in the HTML code to make it more readable and under¬ 
standable. Comments are ignored by the browser and are not displayed, as demon¬ 
strated in Figure 5.3. 

Comments are written like this: 


Try it yourself » 


<html> 

<body> 

<!--This comment will not be displayed--> 
<p>This is a regular paragraph</p> 

</body> 

</html> 


This is a regular paragraph 


Figure 5.3 


NOTE 


Notice there is an exclamation point after the opening bracket, but 
not before the closing bracket. 
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Viewing HTML Source Code 

Have you ever seen a Web page and wondered “Hey! How did they do that?” To 
find out, right-click in the page and select View Source (in Internet Explorer), View 
Page Source (in Firefox), or similar options for other browsers. This will open a 
window that shows you the HTML code of the page, as shown in Figure 5.4. 


<!DOCTYPE html PUBLIC n -//W3C//DTD XHTML 1.0 Transitional//EN " "http://vvv.v 

<htxnl lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<title>Tryit Editor vl.4</title> 

clink rel="stylesheet" type="text/css" href=" /tryit. css " /> 
cscript type-"text/javascript"> 
function displayad() 

< 

document.getElementByld("adframe").src-"/tryitbanner.asp?secid«tryhtml&rnd-" 

} 

</script> 

</head> 

<body> 

Ctable width-"100%" border-^O" cellpadding-"0" cellspacing-"0"> 

<tr> 

<td align= n center"> 

Ciframe id-"adframe" style-"background-color:#ffffff" height«"98" width-"890 
src°" /tryitbanner.a3p?3ecid-tryhtml&rnd-0.3104364 "x/iframe> 

</td> 

</tr> 

</table> 

JUi" 


Figure 5.4 


HTML Tag Reference 

The tag reference for w3schools contains additional information about these tags 
and their attributes. A full list of legal attributes for each HTML element is listed in 
the w3schools Complete HTML Reference online at: 


http: / / www. w3schools. com/tags/default. asp 
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CHAPTER 6 


HTML PARAGRAPHS 


In This Chapter 

□ HTML Paragraphs 

□ HTML Line Breaks 

□ HTML Output Tips 

HTML Paragraphs 

HTML documents are divided into paragraphs. Paragraphs are defined with the 
<P> tag. 

<p>This is a paragraph.</p> 


NOTE 


Most browsers automatically add an empty line before and after paragraphs. 


Don't Forget the End Tag 

Most browsers will display HTML correctly even if you forget the end tag: 

<p>This is a paragraph. 

<p>This is another paragraph.</p> 


This code will work in most browsers, but don't rely on it. Forgetting the end tag 
can produce unexpected results or errors. Future versions of HTML will not allow 
you to skip end tags. 


23 







Learn HTML and CSS with w3schools 


HTML Line Breaks 

Use the <br /> tag if you want a line break (a new line) without starting a new 
paragraph. The <br /> element is an empty HTML element. It has no end tag. 
The results of this code are shown in Figure 6.1. 


Try it yourself » 


<html> 

<body> 

<p>This is<br />a para-<br />graph with line breaks</p> 

</body> 

</html> 


This is 
a para¬ 
graph with line breaks 


Figure 6.1 


NOTE 


In XML and future versions of HTML, HTML elements with no end tag 
(closing tag) are not allowed. Even if <br> works in most browsers, writing <br /> 
instead is more future-proof and thus considered best practice. 


HTML Output Tips 

You can never be sure how HTML will be displayed. Large or small screens, differ¬ 
ent brands of browsers, and resized windows will create different results. 

Be aware that with HTML, you cannot change the output by adding extra spaces 
or extra lines in your HTML code. The browser will remove extra spaces and extra 
lines when the page is displayed. Any number of lines count as one space, and any 
number of spaces count as as one space. 

The following example shows how one might naturally think to format a passage of 
multiline text, but the results of that code, shown in Figure 6.2, remind you that the 
browser doesn’t break the lines as you expect without a <br /> tag. 
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Try it yourself » 


<html> 

<body> 

<P> 

My Bonnie lies over the ocean. 

My Bonnie lies over the sea. 

My Bonnie lies over the ocean. 

Oh, bring back my Bonnie to me. 

</p> 

<p>Note that your browser ignores your layout!</p> 

</body> 

</html> 


My Bonnie lies over the ocean. My Bonnie Kes over the sea. My Bonnie lies 
over the ocean. Oh, bring back my Bonnie to me. 

Note that your browser ignores your Layout! 


Figure 6.2 


The next example demonstrates some of the default behaviors of paragraph ele¬ 
ments. As you can see in Figure 6.3, despite the fact that they were typed very 
differently, the first two paragraphs end up looking similar to the third paragraph, 
which had no extraneous spaces or line breaks. 


Try it yourself » 


<html> 

<body> 

<P> 

This paragraph 
contains a lot of lines 
in the source code, 
but the browser 


(continued) 
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(continued) 

ignores it. 

</p> 

<P> 

This paragraph 

contains a lot of spaces 

in the source code, 
but the browser 

ignores it. 

</p> 


<P> 


The number of lines in a paragraph depends on the 
your browser window, if you resize the browser 
number of lines in this paragraph will change. 


size of 
window, the 


</p> 


</body> 

</html> 


This paragraph contains a lot of lines in the source code, but the browser 
ignores it. 

This paragraph contains a lot of spaces in the source code, but the browser 
ignores it. 

The number of Hnes in a paragraph depends on the size of your browser 
window. If you resize the browser window, the number of lines in this paragraph 
will change. 


Figure 6.3 


Complete Tag Reference 

The w3schools tag reference contains additional information about these tags and 
their attributes. A full list of legal attributes for each HTML element is listed in 
the w3schools Complete HTML Reference online at: 



http: / / www.w3 schools. com/tags/default. asp 
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CHAPTER 7 


HTML TEXT 
FORMATTING 


In This Chapter 

□ HTML Formatting Tags 

□ Text Formatting 

□ Preformatted Text 

□ “Computer Output” Tags 

□ Address 

□ Abbreviations and Acronyms 

□ Text Direction 

□ Quotations 

□ Deleted and Inserted Text 


HTML Formatting Tags 

HTML uses tags like <b> and <i > to modify the appearance of text, like bold or 
italic. These HTML tags are called formatting tags. Refer to the end of this chapter 
for a complete reference. 
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Text Formatting 

The following example demonstrates how you can format text in an HTML docu¬ 
ment. The results appear in Figure 7.1. 


Try it yourself » 


<html> 

<body> 

<pxb>This text is bo1d</bx/p> 

<pxstrong>This text is strong</strongx/p> 

<pxbig>This text is big</bigx/p> 

<pxem>This text is emphasized</emx/p> 

<pxi >Thi s text i s i tal i c</i x/p> 

<pxsmal 1>This text is small</smallx/p> 

<p>This is<sub> subscript</sub> and <sup>superscript</supx/ 
P> 

</body> 

</html> 


This text is bold 
This text is strong 
This text is big 
This text is emphasized 
This text is italic 
This text is small 

This is subscript and 

Figure 7.1 
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Preformatted Text 

This example demonstrates how you can control the line breaks, spaces, and char¬ 
acter widths with the <pre> tag. 



The results appear in Figure 7.2. You'll see more examples of computer 
output in the next section. 


Try it yourself » 


<html> 

<body> 

<pre> 

This is 

preformatted text, 
it preserves both spaces 

and line breaks and shows the text in a monospace font. 
</pre> 

<p>The pre tag is good for displaying computer code:</p> 
<pre> 

for i = 1 to 10 
print i 
next i 
</pre> 

</body> 

</html> 


This is 

preformatted text. 

It preserves both spaces 

and line breaks and shows the text in a monospace font. 
The pre tag is good for displaying computer code: 

for i - 1 to 10 
print i 
next i 


Figure 7.2 
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"Computer Output"Tags 

This example demonstrates how different “computer output” tags will be displayed. 
The results appear in Figure 7.3. 


Try it yourself » 


<html> 

<body> 

<code>Computer code</code> 

<br /> 

<kbd>Keyboard input</kbd> 

<br /> 

<tt>Teletype text</tt> 

<br /> 

<samp>Sample text</samp> 

<br /> 

<var>Computer variable</var> 

<br /> 

<P> 

<b>Note:</b> These tags are often used to display computer/ 
programming code on the page. 

</p> 

</body> 

</html> 


Computer code 
Keyboard input 
Teletype text 
Sample text 
Computer variable 

Note: These tags are often used to display computer programming code on the 
page. 


Figure 7.3 
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Address 

This example demonstrates how to write an address in an HTML document. The 
results appear in Figure 7.4. 


Try it yourself » 


<html> 

<body> 

<address> 

Donald Duck<br> 
BOX 555<br> 

Disneyland<br> 
USA 

</address> 

</body> 

</html> 


Donald Duck 
BOX 555 
Dismyhnd 
USA 


Figure 7.4 
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Abbreviations and Acronyms 

This example demonstrates how to handle an abbreviation or an acronym. The 
results appear in Figure 7.5. 


Try it yourself » 


<html> 

<body> 

<abbr title="united Nations">l)N</abbr> 

<br /> 

<acronym title="world wide web">www</acronym> 

<p>The title attribute is used to show the spelled-out 
version when holding the mouse pointer over the acronym 
or abbreviation.</p> 

</body> 

</html> 


UN 

WWW 

The title attribute is used to show the speOed-out version when holding the 
mouse pointer over the acronym or abbreviation. 


Figure 7.5 
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Text Direction 

This example demonstrates how to change the text direction. The results appear in 
Figure 7.6. 


Try it yourself » 


<html> 

<body> 

<P> 

If your browser supports bidirectional override (bdo), the 
next line will be written from the right to the left 
(rtl): 

</p> 

<bdo dir="rtl"> 

Here is some backward text 
</bdo> 

</body> 

</html> 


If your browser supports bidirectional override (bdo), the nest line will be 
written from the right to the left (rtf): 

Uet drawkcab emos si ereH 

Figure 7.6 
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Quotations 

This example demonstrates how to handle long and short quotations. The results 
appear in Figure 7.7. 


Try it yourself » 


<html> 

<body> 


A blockquote quotation: 

<blockquote> 

This is a long quotation. This is a long quotation. This is 
a long quotation. This is a long quotation. This is a long 
quotation. 

</blockquote> 

<pxb>The browser inserts line breaks and margins for a 
blockquote element.</bx/p> 


A short quotation: 

<q>This is a short quotation</q> 


<pxb>The q element does not render as anything special.</ 

bx/p> 


</body> 

</html> 


A blockquote quotation: 

This is a long quotation. This is a long quotation. This is a long 
quotation. This is a long quotation. This is a long quotation. 

The browser inserts line breaks and margins for a blockquote element. 

A short quotation: ""This is a short quotation"' 

The q element does not render as anything special. 

Figure 7.7 
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Deleted and Inserted Text 

This example demonstrates how to mark a text that is deleted (strikethrough) or 
inserted (underscore) to a document. The results appear in Figure 7.8. 


Try it yourself » 


<html> 

<body> 

<P> 

a dozen is 
<de1>twenty</de1> 

<ins>twelve</ins> 
pieces 

</p> 

<P> 

Most browsers will <del>overstrike</del> deleted text and 
<ins>underscore</ins> inserted text. 

</p> 

<P> 

Some older browsers will display deleted or inserted text as 
plain text. 

</p> 

</body> 

</html> 


a dozen is tw e nty twelve pieces 

Most browsers wl ov e r s trik e deleted text and underscore inserted text 


Some older browsers will display deleted or inserted text as plain text. 


Figure 7.8 


35 










Learn HTML and CSS with w3schools 


Text Formatting Tags 


Examples of these tags’ results appear in Figure 7.9. 


NOTE 


Many of these tags are either deprecated or soon will be. Formatting 
with tags is very bad and should be done with CSS, and/or more descriptive content 
driven tags. Additionally, the <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, 
<var>, and <ci te> tags are all phrase tags.They are not deprecated, but it is pos¬ 
sible to achieve richer effect with CSS. 


TAG 

DESCRIPTION 

<b> 

Defines bold text 

A 

bp 

V 

Defines big text 

<em> 

Defines emphasized text 

<i> 

Defines italic text 

<small> 

Defines small text 

<strong> 

Defines strong text 

<sub> 

Defines subscripted text 

<sup> 

Defines superscripted text 

<ins> 

Defines inserted text 

<del> 

Defines deleted text 

<s> 

Deprecated. Use <del> instead 

<strike> 

Deprecated. Use <del> instead 

<u> 

Deprecated. Use styles instead 


Defines bold text 
Defines big text 
Defines emphasized text 
Defines italic text 
Defines small text 
Defines strong text 
Defines subscripted text 
Defines superscripted text 
Defines inserted text 

Defines del e t e d text 

Figure 7.9 
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Computer Output Tags 

Examples of these tags’ results appear in Figure 7.10. 


TAG 

DESCRIPTION 

<code> 

Defines computer code text 

<kbd> 

Defines keyboard text 

<samp> 

Defines sample computer code 

<tt> 

Defines teletype text 

<var> 

Defines a variable 

<pre> 

Defines preformatted text 

<listing> 

Deprecated. Use <pre> instead 

<plaintext> 

Deprecated. Use <pre> instead 

<xmp> 

Deprecated. Use <pre> instead 


Defines computer code text 
Defines keyboard text 
Defines sample computer code 
Defines reletype text 
Defines a variable 
Defines preforraatted text 

Figure 7.10 
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Citations, Quotations, and Definition 
Tags 

Examples of these tags’ results appear in Figure 7.11. 


TAG 

DESCRIPTION 

<abbr> 

Defines an abbreviation 

<acronym> 

Defines an acronym 

< address > 

Defines an address element 

<bdo> 

Defines the text direction 

<blockquote> 

Defines a long quotation 

<q> 

Defines a short quotation 

<cite> 

Defines a citation 

<dfn> 

Defines a definition term 


Defines an abbreviation 
Defines an acronym 
Defines an address element 
Defines the text direction 

Defines a long quotation 
“Defines a short quotation* 
Defines a citation 
Defines a definition term 
Figure 7.11 
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CHAPTER 8 


HTML STYLES 


In This Chapter 

□ HTML Style Attribute 

□ Deprecated Tags and Attributes 

□ Common HTML Styles 


The HTML Style Attribute 

The style attribute is a new HTML attribute. It introduces the use of CSS in 
HTML. The purpose of the styl e attribute is to provide a common way to style 
all HTML elements. 


Styles were introduced with HTML 4 as the new and preferred way to style HTML 
elements. With HTML styles, formatting and attributes can be added to HTML 
elements directly by using the styl e attribute, or indirectly in separate Cascading 
Style Sheets (CSS files). 



In this book, we use the styl e attribute to introduce you to HTML styles 
and CSS. You can learn more about styles and CSS in our tutorial, Learn 
CSS with w3schools. 


The code in the following example and the results in Figure 8.1 introduce you to a 
new way of adding formatting to a document. 


Try it yourself » 


<html> 

<body style="background-color:Gray;"> 

<hl>Look! Styles and colors</hl> 

<p style="font-family:verdana;color:red"> 
This text is in Verdana and red</p> 

<p style="font-fami1y:times;col or:green"> 
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This text is in Times and green</p> 

<p sty1e="font-size:30px">This text is 30 pixels high</p> 

</body> 

</html> 


Look! Styles and colors 

This text is in Verdana and red 
This text is in Times and green 

This text is 30 pixels high 

Figure 8.1 



Because this book is not printed in color, it might be difficult to see the 
results dealing with in the figures. To see how the results look on the screen, 
enter this code into the Try It Yourself text editor at w3schools.com. 


Deprecated Tags and Attributes 

In HTML 4, some tags and attributes are defined as deprecated. Deprecated means 
that they will not be supported in future versions of HTML and The message is 
clear: Avoid the use of deprecated tags and attributes. 

These tags and attributes should be avoided, and styles should be used instead: 


TAGS 

DESCRIPTION 

<center> 

Defines centered content 

<font> and <basefont> 

Defines HTML fonts 

<s> and <strike> 

Defines strikeout text 

<u> 

Defines underlined text 

ATTRIBUTES 

DESCRIPTION 

align 

Defines the alignment of text 

bgcolor 

Defines the background color 

color 

Defines the text color 
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Common HTML Styles 

Background Color 

<body style="background-color:gray"> 

The styl e attribute defines a style for the <body> element. The results of the style 
code appear in Figure 8.2. 


Try it yourself » 


<html> 

<body style="background-color:gray"> 
<h2>Look: Colored Background!</h2> 

</body> 

</html> 


Look: Colored Background! 

Figure 8.2 


The new styl e attribute makes the "old" bgcol or attribute, shown in Figure 8.3, 
obsolete. 


Try it yourself » 


<html> 

<body bgcolor="gray"> 

<h2>Look: Colored Background!</h2> 

<p>For future-proof HTML, use HTML styles instead:</p> 
<p>style="background-color:gray"</p> 

</body> 

</html> 
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Look: Colored Background! 

For future -proof HTML , use HTML styles instead 
style=l>ackgjr ound- color:gray" 

Figure 8.3 


Font Family, Color, and Size 

The styl e attribute defines a style for the <p> element, as shown in Figure 8.4: 


Try it yourself » 


<html> 

<body> 

<hl style="font-family:verdana">A heading</hl> 

<p style="font-family:courier new; color:red; font- 
si ze:20px;">A paragraph</p> 

</body> 

</html> 


A heading 

A paragraph 


Figure 8.4 


The new styl e attribute makes the old <font> tag, shown in Figure 8.5, obsolete. 


Try it yourself » 


<html> 

<body> 
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<pxfont size="5" face= ,, Times" color="red"> 
This is another paragraph. 

</fontx/p> 

</body> 

</html> 


This is a paragraph. 

This is another paragraph. 


Figure 8.5 


Text Alignment 

<hl style="text-align:center"> 

The style attribute defines a style for the <hl> element. The results appear in 
Figure 8.6. 


Try it yourself » 


<html> 

<body> 


<hl style="text-align:center">This is heading l</hl> 


<p>The heading above is aligned to the center of this page. 
The heading above is aligned to the center of this page. 
The heading above is aligned to the center of this page. 

</p> 


</body> 

</html> 


This is heading 1 

The heading above is aligned to the center of this page. The heading above is 
aligned to the center of this page. The heading above is aligned to the center of 
this page. 

Figure 8.6 
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Although they display similarly in the browser, the new style attribute makes the 
old al i gn attribute in Figure 8.7 obsolete. 


Try it yourself » 


<html> 

<body> 


<hl align="center">This is heading l</hl> 

<p>The heading above is aligned to the center of this page. 
The heading above is aligned to the center of this page. 
The heading above is aligned to the center of this page.</ 
P> 


</body> 

</html> 


This is heading 1 

The heading above is aligned to the center of this page The heading above is 
aligned to the center of this page. The heading above is aligned to the center of 
this page. 


Figure 8.7 


Complete Tag Reference 

The w3schools tag reference contains additional information about these tags and 
their attributes. A full list of legal attributes for each HTML element is listed in the 
w3schools Complete HTML Reference online at: 



http: / / www. w3schools. com/tags / default. asp 
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HTML LINKS 


In This Chapter 

□ HTML Links 

□ Open a Link in a New Browser Window 

□ Hyperlinks, Anchors, and Links 

□ HTML Link Syntax 

□ Links on the Same Page 

□ Creating a mai 1 to: Link 

□ Creating an Image Link 

HTML Links 

A link is the “address” to a document (or a resource) located on the World Wide 
Web or elsewhere within your own Web server. Both types of links are shown in the 
following code example. 

<html> 

<body> 

<P> 

<a href="lastpage.htm"> 

This text</a> is a link to a page on this web site. 

</p> 

<P> 

<a href="http://www.microsoft.com/"> 

This text</a> is a link to a page on the world wide web. 

</p> 


</body> 

</html> 
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You can see in Figure 9.1 that internal and external links are displayed similarly in 
the browser. 

This text is a link to a page on this Web site. 

This text is a link to a page on the World Wide Web. 

Figure 9.1 


Open a Link in a New Browser Window 

The target attribute enables you to control how the browser responds when you 
click on the link. The following example demonstrates how to link to another page 
by opening a new window so that the visitor does not have to leave your Web site. 

The results of the codes are shown in Figure 9.2. 


Try it yourself » 


<html> 

<body> 

<a href="lastpage.htm" target="_blank">Last Page</a> 

<P> 

if you set the target attribute of a link to "_blank", 
the link will open in a new window. 

</p> 

</body> 

</html> 


Last Page 

If you set the target attribute of a link to "Jblank", the link w01 open in a new 
window. 

Figure 9.2 
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Hyperlinks, Anchors, and Links 

In Web terms, a hyperlink is a reference (an address) to a resource on the Web. 
Hyperlinks can point to any resource on the Web: an HTML page, an image, a 
sound file, a movie, and so on. 

An HTML anchor is a term used to define a hyperlink destination inside a docu¬ 
ment. 

The anchor element <a> defines both hyperlinks and anchors. 


NOTE 


We will use the term HTML link when the <a> element points to a 
resource, and the term HTML anchor when the <a> elements defines an address 
inside a document. 


HTML Link Syntax 

The start tag contains attributes about the link. 

<a href="url">Link text</a> 

The element content (Link text) defines the part to be displayed. The element con¬ 
tent doesn’t have to be text. You can link from an image or any other HTML ele¬ 
ment. 

href Attribute 

The href attribute defines the link “address”. The following code will display in a 
browser as shown in Figure 9.3: 

This <a> element defines a link to w3schools: 

<a href="http://www.w3schools.com/">visit w3schools! </a> 


Visit w3 schools! 


Figure 9.3 
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The target Attribute 

The target attribute defines where the linked document will be opened. 
The following code example opens the document in a new browser window: 


Try it yourself » 


<html> 

<body> 

<a href=http://www.w3schools.com/ target="_blank">visit 
w3schools!</a> 

<P> 

if you set the target attribute of a link to "_blank", 
the link will open in a new window. 

</p> 

</body> 

</html> 


You can use the following options for the target attribute: 


OPTION 

DESCRIPTION 

blank 

Opens the linked document in a new window 

_self 

Opens the linked document in the same frame as it was 
clicked (this is default) 

parent 

Opens the linked document in the parent frameset 

_top 

Opens the linked document in the full body of the 
window 

framename 

Opens the linked document in a named frame 
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The name Attribute 

When the name attribute is used, the <a> element defines a named anchor inside 
an HTML document. Named anchors are not displayed in any special way by the 
browser because they are invisible to the reader. 

Named anchors are sometimes used to create a table of contents at the beginning of 
a large document. Each chapter within the document is given a named anchor, and 
links to each of these anchors are put at the top of the document. 

If a browser cannot find a named anchor that has been specified, it goes to the top 
of the document. No error occurs. 


Named anchor syntax: 

<a name="1abel">Any content</a> 

The link syntax to a named anchor: 

<a href="#label">Any content</a> 

The # in the href attribute defines a link to a named anchor. A named anchor 
inside an HTML document: 


<a name="tips">usefu1 Tips Section</a> 

A link to the “Useful Tips Section” from elsewhere in the same document: 

<a href="#tips">Jump to the useful Tips Section</a> 

A link to the “Useful Tips Section” from another document: 

<a href="http ://www. w3schools.com/html_tutorial. 
htm#tips">Jump to the useful Tips Section</a> 


TIP 


Always add a trailing slash to subfolder references. If you link like this: 
href="http://www.w3school s . com/html ",you will generate two HTTP requests 
to the server because the server will add a slash to the address and create a new request 
like this: href ="http://www.w3school s . com/html/". 
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Links on the Same Page 

The following code example demonstrates how to use a link to jump to another 
part of a document. The results of the code are shown in Figure 9.4. 


Try it yourself » 


<html> 

<body> 

<P> 

<a href="#C4">See also Chapter 4.</a> 

</p> 

<h2>Chapter l</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 2</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 3</h2> 

<p>This chapter explains ba bla bla</p> 

<h2xa name="C4">Chapter 4</ax/h2> 
<p>This chapter explains ba bla bla</p> 

<h2>Chapter 5</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 6</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 7</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 8</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 9</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 10</h2> 

<p>This chapter explains ba bla bla</p> 
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<p>This chapter explains ba bla bla</p> 
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<h2>Chapter 12</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 13</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 14</h2> 

<p>This chapter explains ba bla bla</p> 


<h2>Chapter 15</h2> 

<p>This chapter explains ba bla bla</p> 


<h2>Chapter 16</h2> 

<p>This chapter explains ba bla bla</p> 


<h2>Chapter 17</h2> 

<p>This chapter explains ba bla bla</p> 


</body> 

</html> 


See also Chapter 4. 

A 

Chapter 1 


This chapter explains ba bla bla 


Chapter 2 


This chapter explains ba bla bla 


Chapter 3 


This chapter explains ba bla bla 


Chapter 4 


This chapter explains ba bla bla 


Figure 9.4 
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Creating a mailto: Link 

The following example demonstrates how to link to an e-mail address and generate 
a new e-mail message in your default e-mail application (this works only if you have 
mail installed). The results of the code are shown in Figure 9.5. 


Try it yourself » 


<html> 

<body> 

<P> 

This is a mail link: 

<a href="mai1 to:someone@microsoft.com?subject=Hel1o%20 
again"> 

Send Mail</a> 

</p> 


<P> 

<b>Note:</b> Spaces between words should be replaced by %20 
to <b>ensure</b> that the browser will display your text 
properly. 

</p> 


</body> 

</html> 


This is a mail link: Send Mail 

Note: Spaces between words should be replaced by %20 to ensure that the 
browser will display your text properly. 

Figure 9.5 
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The following example demonstrates a more complicated mai 1 to: link. This link 
not only generates a new e-mail, it adds a cc, bcc, a subject line, and the message 
body. The results of the code are shown in Figure 9.6. 


Try it yourself » 


<html> 

<body> 


<P> 

This is another mail to link: 

<a href="mai1 to:someone@microsoft.com?cc=someoneelse@ 
microsoft.com&bcc=andsomeoneel se2@mi crosoft. 
com&subject=Summer%20Party&body=You%20are%20invi ted%20 
to%20a%20big%20summer%20party!">Send mail!</a> 

</p> 


<P> 

<b>Note:</b> Spaces between words should be replaced by %20 
to <b>ensure</b> that the browser will display your text 
properly. 

</p> 


</body> 

</html> 


This is another matfto Bnk: Send mail? 

Note* Spaces between words should be replaced by %20 to ensure that the 
browser will display your text properly. 

Figure 9.6 
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Creating an Image Link 

The following example demonstrates how to use an image as a link. Click on the 
image to go to the linked page. The results of the code are shown in Figure 9.7. 


Try it yourself » 


<html> 

<body> 

<p>Create a link attached to an image: 

<a href="default.htm M > 

<img src="smiley.gif" al t="HTML tutorial" width="32" 
height="32" /> 

</ax/p> 

<p>No border around the image, but still a link: 

<a href="default.htm"> 

<img border="0" src="smiley.gif" al t="HTML tutorial" 
width="32" height="32" /> 

</ax/p> 

</body> 

</html> 


Create a link attached to an image: 



No border around the image, but still a ink: 



Figure 9.7 


| You learn all about HTML images in Chapter 10, "HTML Images." 
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CHAPTER 10 


HTML IMAGES 


In This Chapter 

□ i mg Tag and the s re Attribute 

□ Insert Images from Different Locations 

□ Background Images 

□ Aligning Images 

□ Floating Images 

□ Adjusting Image Sizes 

□ alt Attribute 

□ Creating an Image Map 

img Tag and the sre Attribute 

In HTML, images are defined with the <i mg> tag. 

The img tag is empty, which means that it contains attributes only and it has no 
closing tag. 

To display an image on a page, you need to use the sre attribute, sre stands for 
“source”. The value of the sre attribute is the URL of the image you want to dis¬ 
play on your page. 

The syntax of defining an image: 

<img src="ur7" /> 

The URL points to the location or address where the image is stored. An image file 
named "boat.gif" located in the directory "images" on "www.w3schools.com" has 
the URL: 

http://www.w3schools.com/images/boat.gif 


NOTE 


It is not necessary to have administrative access to the actual image 
file to which you are linking. You can link to any image as long as you know its URL. 
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The browser puts the image where the image tag occurs in the document. If you put 
an image tag between two paragraphs, the browser shows the first paragraph, then 
the image, and then the second paragraph. 

The following example demonstrates how to insert images to your Web page. The 
results of this code are shown in Figure 10.1. 


Try it yourself » 


<html> 

<body> 

<P> 

An image: 

<img src="constr4.gif" width="144" height="50" /> 

</p> 

</body> 

</html> 



Figure 10.1 


NOTE 


"Don't try this at home!"The images for this example reside on the 
w3schools server rather than your own, so unless you're using the Try It Yourself edi¬ 
tor at www.w3shools.com, you won't get the same results. If you try this exact code 
in your browser the image will be missing. 




The next section shows you how to point to images on other servers. 
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Insert Images from Different Locations 

The example shown in Figure 10.2 demonstrates how to insert an image from 
another folder on your server or another location on the Web. 


Try it yourself » 


<html> 

<body> 

<p>An image from another folder:</p> 

<img src="/images/chrome.gif" width="33" height="32" /> 
<p>An image from w3schoo1s: </p> 

<img src="http://www.w3schools.com/images/w3schoo1s_green. 
jpg" width="104" height= ,, 142" /> 

</body> 

</html> 


An image from another folder 


An image from w3 schools: 



Figure 10.2 


TIP 


Image files can take time to load in the browser, so use them sparingly. 
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Background Images 

The next example demonstrates how to add a background image to an HTML 
page. The results appear in Figure 10.3. 


Try it yourself » 


<html> 

<body background="background.jpg"> 

<h3>Look: A background image!</h3> 

<p>Both gif and jpg files can be used as HTML backgrounds.</ 
P> 

<p>if the image is smaller than the page, the image will re¬ 
peat itself.</p> 

</body> 

</html> 


Look: A background image! 

Both gif and jpg files can be used as HTML backgrounds. 

If the image is smaller than the page, the image will repeat itself. 


Figure 10.3 
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Aligning Images 

Figures 10.4 and 10.5 demonstrate different ways you can align images within the 
text. 


Try it yourself » 


<html> 

<body> 


<p>The text is aligned with the image 

<img src="hackanm.gif" align="bottom" width="48" height="48" 

/> 

at the bottom.</p> 


<p>The text is aligned with the image 

<img src="hackanm.gif" align="middle" width="48" height="48" 

/> 

in the middle.</p> 


<p>The text is aligned with the image 

<img src="hackanm.gif" align= ,, top" width= M 48" height="48 M /> 
at the top.</p> 


<pxb>Note:</b> The bottom alignment is the default!</p> 


</html> 

</body> 



59 







Learn HTML and CSS with w3schools 



<html> 

<body> 


<p>This image appears 

<img src="hackanm.gif" width= ,, 48" height= ,, 48" /> 
exactly where it is placed in the code.</p> 

<pximg src="hackanm.gif" width="48 M height= ,, 48" /> 

This image appears exactly where it is placed in the code.</ 


P> 


<p>This image appears exactly where it is placed in the 
code. 

<img src="hackanm.gif" width= M 48" height= M 48" /></p> 


</body> 

</html> 


This image appears 



exactly where it is placed in the code. 



This image appears exactiy where it is placed in the code. 


This image appears exactly where it is placed in the code. 



Figure 10.5 
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Floating Images 

In the next example, you learn how to let an image float to the left or right of a 
paragraph. The results appear in figure 10.6. 


Try it yourself » 


<html> 

<body> 


<P> 

<img src="hackanm.gif" align="left" width="48" height="48" 

/> 

A paragraph with an image. The align attribute of the image 
is set to "left". The image will float to the left of this 
text. 

</p> 


<P> 

<img src="hackanm.gif" align="right" width="48" height="48" 

/> 

A paragraph with an image. The align attribute of the im¬ 
age is set to "right". The image will float to the right of 
this text. 

</p> 


</body> 

</html> 


A paragraph with an image The align attribute of the image is set to 
"left" . The brage will float to the left of this text 

A paragraph with an image. The align attribute of the image is set to 
Tight”. The image will float to the right of this text. 

Figure 10.6 
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Adjusting Image Sizes 

The following example, shown in Figure 10.7, demonstrates how to display images 
in different sizes on the page. 

The width and hei ght attributes allow the page to render properly and more effi¬ 
ciently before the image is downloaded. Without them, the page will render once, 
then re-render when each image is loaded. 

The image will be scaled to fit the stated height and width. Sometimes this can have 
a desired effect, other times it's disastrous. 


Try it yourself » 


<html> 

<body> 

<P> 

<img src="hackanm.gif" width="20" height="20" /> 

</p> 

<P> 

<img src="hackanm.gif" width="45" height="45" /> 

</p> 

<P> 

<img src="hackanm.gif" width="70" height="70" /> 

</p> 

<p>You can make an image smaller or larger by changing the 
values of the height and width attributes.</p> 

</body> 

</html> 


& 

& 

& 

You can make an image smaller or larger by changing the values of the "height' 1 
and ’'width” attributes. 

Figure 10.7 
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alt Attribute 

The al t attribute is used to define an alternate text for an image. The al t attribute 
tells the reader what he or she is missing on a page if the browser can’t load images. 
The browser will then display the alternate text instead of the image. 

The value of the al t attribute is an author-defined text: 

<img src="boat.gif" alt="Big Boat" /> 

It is a good practice to include alternate text for every image on a page to improve the 
display and usefulness of your document for people who have text-only browsers. 

The following example shows what happens when the image file is not available. 
The results are in Figure 10.8. 


Try it yourself » 


<html> 

<body> 

<P> 

An image: 

<img src="../constr4.gif" alt=”Site_Under_Construction" 
width="200" height="50" /> 

</p> 

</body> 

</html> 


An image: 

^Site_Uflder_ConsfcruetioiT 




Figure 10.8 


Creating an Image Map 


The following example demonstrates how to create an image map with clickable 
regions. Each of the regions is a hyperlink. The results of this example are shown 
in Figure 10.9. 


t Creating a simple image link was covered in Chapter 9, “HTML Links”. 
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Try it yourself » 


<html> 

<body> 


<p>Click on the sun or on one of the planets to watch it 
closer:</p> 


<img src="pl anets .gi f" width= ,, 145" 
usemap="#planetmap" /> 


height="126" alt="Planets" 


<map name="planetmap"> 

<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun. 
htm" /> 

<area shape="circle" coords="90,58,3" alt="Mercury" 
href="mercur.htm" /> 

<area shape="circle" coords="124,58,8" alt="venus" 
href="venus.htm" /> 

</map> 


</body> 

</html> 


Click on the sun or on one of the planets to watch it closer 



Figure 10.9 


Complete Tag Reference 

w3schools’ tag reference contains additional information about these tags and their 
attributes. A full list of legal attributes for each HTML element is listed in the 
w3schools Complete HTML Reference online at: 



http: / / www. w3schools. com/tags / default. asp 
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CHAPTER 11 


HTML TABLES 


In This Chapter 

□ Creating HTML Tables 

□ Table Borders 

□ Table with No Border 

□ Headings in a Table 

□ Table with a Caption 

□ Cells Spanning Multiple Columns 

□ Tags Inside a Table 

□ Cell Padding 

□ Cell Spacing 

□ Table Background Colors and Images 

□ Cell Background Colors and Images 

□ frame Attribute 

□ Using frame and border to Control Table Borders 


Creating HTML Tables 

Tables are an excellent way to organize and display information on a page. Tables 
are defined using the <tabl e> tag. 

A table is divided into rows with the <t r> tag, and each row is divided into data 
cells using the <td> tag. The letters td stand for “table data,” which is the content of 
a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal 
rules, tables, and so on. A simple HTML table appears in Figure 11.1. 
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HTML Tables 


Apples 

44% 

Bananas 

23% 

Oranges 

13% 

Other 

10% 


Figure 11.1 


A basic table includes the following tags: 

►► Each table starts with a tabl e tag. 

►► Each table row starts with atr tag. 

►► Each table data (cell) starts with a td tag. 


Following is an example of code for a table with one row and one column. 


Try it yourself » 


<html> 

<body> 

<h4>One column:</h4> 
<table border="l"> 
<tr> 

<td>100</td> 

</tr> 

</table> 

</html> 

</body> 
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The following code creates a table with one row and three columns. 


Try it yourself » 


<html> 

<body> 

<table border="l"> 
<tr> 

<td>100</td> 

<td>200</td> 

<td>300</td> 

</tr> 

</table> 

</html> 

</body> 


The following code creates a table with two rows and three columns. 


Try it yourself » 


<html> 

<body> 

<table border="l"> 
<tr> 

<td>100</td> 

<td>200</td> 

<td>300</td> 

</tr> 

<tr> 

<td>400</td> 

<td>500</td> 

<td>600</td> 

</tr> 

</table> 

</body> 

</html> 
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The results of these three example tables appear in Figure 11.2. 



Table Borders 

The border attribute controls the appearance of the table’s borders or lines. The 
default border is 0, so if you do not specify a border attribute, the table is dis¬ 
played without any borders. Sometimes this is useful, but most of the time, you 
want the borders to be visible. The following example demonstrates the use of dif¬ 
ferent table borders. The results of this example are shown in Figure 11.3. 


Try it yourself » 


<html> 

<body> 

<h4>with a normal border:</h4> 
<table border="l"> 

<tr> 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 
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<h4>with a thick border:</h4> 
<table border="8"> 
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<tr> 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 

<h4>with a very thick border:</h4> 
<tab1e border="15"> 

<tr> 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 

</body> 

</html> 


With a normal border: 





First |Row 

Second |Row 


W ith a thick border: 



With a very thick border: 



Figure 11.3 
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Table with No Border 

If you don't provide a bo rde r attribute, the default is none. The following example 
shows two ways to create a table with no borders. Figure 11.4 displays the table as 
it appears in the browser. Figure 11.4 displays the table as it appears in the browser. 


Try it yourself » 


<html> 

<body> 

<h4>This table has no borders:</h4> 

<table> 

<tr> 

<td>100</td> 

<td>200</td> 

<td>300</td> 

</tr> 

<tr> 

<td>400</td> 

<td>500</td> 

<td>600</td> 

</tr> 

</table> 

<h4>This table also has no borders:</h4> 
<table border="0"> 

<tr> 

<td>100</td> 

<td>200</td> 

<td>300</td> 

</tr> 

<tr> 

<td>400</td> 

<td>500</td> 

<td>600</td> 

</tr> 

</table> 

</body> 

</html> 


70 





Chapter 11: HTML Tables 


This table has no borders: 

100 200 300 
400 500 600 

This table also has no borders: 

100 200 300 
400 500 600 


Figure 11.4 


Headings in a Table 

Table headings are defined with the <th> tag. Figure 11.5 shows the table as it 
appears in the browser. 


Try it yourself » 


<html> 

<body> 

<table border="l"> 

<tr> 

<th>Heading</th> 
<th>Another Heading</th> 

</tr> 

<tr> 

<td>row 1, cell l</td> 
<td>row 1, cell 2</td> 
</tr> 

<tr> 

<td>row 2, cell l</td> 
<td>row 2, cell 2</td> 
</tr> 

</table> 

<h4>vertical headers:</h4> 
<table border="l"> 

<tr> 

<th>First Name:</th> 


(continued) 
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(continued) 

<td>Bi11 Gates</td> 
</tr> 

<tr> 

<th>Telephone:</th> 
<td>555 111 1854</td> 
</tr> 

<tr> 

<th>Telephone:</th> 
<td>555 111 1855</td> 
</tr> 

</table> 

</body> 

</html> 


Heading 

Another Heading 

row 1 3 cell 1 

row 1, cell 2 

row 2, cell 1 

*3 

u 

CN 

£ 

s 


Vertical headers: 


First Name: 

BI Gates 

Telephone: 

555 777 1854 

Telephone: 

555 777 1855 


Figure 11.5 


Empty Cells in a Table 

Table cells with no content do not display very well in most browsers. Notice that 
the borders around the empty table cell are missing (except when using Mozilla 
Firefox). Figure 11.6 shows the table as it appears in the browser. 


Try it yourself » 
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<table border="l"> 

<tr> 

<td>row 1, cell l</td> 
<td>row 1, cell 2</td> 
</tr> 

<tr> 

<td>row 2, cell l</td> 
<tdx/td> 

</tr> 

</table> 

</body> 

</html> 


row 1, cell 1 

row 1 1 cell 2 

row 2, cell 1 



Figure 11.6 


To avoid this, add a nonbreaking space (&nbsp;) to empty data cells to ensure the 
borders are visible, as shown in Figure 11.7. 


Try it yourself » 


<table border="l"> 

<tr> 

<td>row 1, cell l</td> 
<td>row 1, cell 2</td> 
</tr> 

<tr> 

<td>row 2, cell l</td> 
<td>&nbsp;</td> 

</tr> 

</table> 
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row l, ceO 1 

row 1, cell 2 

row 2, cell 1 



Figure 11.7 


TIP 


The <thead>,<tbody>, and <tfoot> elements are seldom used, because of 
bad browser support. Expect this to change in future versions of HTML. 


Table with a Caption 

The following example demonstrates how to create a table with a caption, as shown 
in Figure 11.8. 


Try it yourself » 


<html> 

<body> 

<h4>This table has a caption, and a thick border:</h4> 
<table border="6"> 

<caption>My Caption</caption> 

<tr> 

<td>100</td> 

<td>200</td> 

<td>300</td> 

</tr> 

<tr> 

<td>400</td> 

<td>500</td> 

<td>600</td> 

</tr> 

</table> 

</body> 

</html> 
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This table has 

My Caption 

caption, and a thick border: 

100 200 300 

|soo [coo 





Figure 11.8 


Cells Spanning Multiple Columns 

In this example, you learn how to define table cells that span more than one row or 
one column, as shown in Figure 11.9. 


Try it yourself » 


<html> 

<body> 

<h4>Cell that spans two columns:</h4> 
<table border="l"> 

<tr> 

<th>Name</th> 

<th colspan="2">Telephone</th> 

</tr> 

<tr> 

<td>Bi11 Gates</td> 

<td>555 77 854</td> 

<td>555 77 855</td> 

</tr> 

</table> 

<h4>Cell that spans two rows:</h4> 
<table border="l"> 

<tr> 

<th>First Name:</th> 

<td>Bi11 Gates</td> 

</tr> 

<tr> 

<th rowspan="2">Telephone:</th> 
<td>555 77 854</td> 


(continued) 
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(continued) 

</tr> 

<tr> 

<td>555 77 855</td> 
</tr> 

</table> 

</body> 

</html> 


Cell that spans two columns: 


Name 

Telephone 

Bill Gates 

555 77 854 

555 77 855 


Cell that spans two rows: 


First Name: 

Bill Gates 

Telephone: 

555 77 854 

555 77 855 


Figure 11.9 


Tags Inside a Table 

This example demonstrates how to display elements inside other elements. The 
results appear in Figure 11.10. 


Try it yourself » 


<html> 

<body> 

<table border="l"> 

<tr> 

<td> 

<p>This is a paragraph</p> 
<p>This is another paragraph</p> 
</td> 

<td>This cell contains a table: 
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<table border="l"> 

<tr> 

<td>A</td> 

<td>B</td> 

</tr> 

<tr> 

<td>C</td> 

<td>D</td> 

</tr> 

</table> 

</td> 

</tr> 

<tr> 

<td>This cell contains a list 
<ul> 

<1i>apples</li> 

<1i>bananas</li> 

<1i>pineapples</li> 

</ul> 

</td> 

<td>HELLO</td> 

</tr> 

</table> 


</body> 

</html> 


This is a paragraph 

This cell contains a table: 



This is another paragraph 

m 


This cell contains a Kst 



* apples 

HELLO 

* bananas 

* pineapples 




Figure 11.10 
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Cell Padding 

This example demonstrates how to use cell padding to create more white space 
between the cell content and its borders. The results appear in Figure 11.11. 


Try it yourself » 


<html> 

<body> 

<h4>without cel 1padding:</h4> 

<table border="l"> 

<tr> 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 

<h4>with cel 1padding:</h4> 

<table border="l" cel 1padding="10"> 
<tr> 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 

</body> 

</html> 
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Without cellpadding: 

First | Row 
Second |Row 


With cellpadding: 


First 

Row 

Second 

Row 


Figure 11.11 


Cell Spacing 

This example demonstrates how to use cell spacing to increase the distance between 
the cells, as shown in Figure 11.12 


Try it yourself » 


<html> 

<body> 

<h4>without cellspacing:</h4> 

<table border="l"> 

<tr> 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 

<h4>with cellspacing:</h4> 

<table border="l" cel 1spacing="10"> 
<tr> 

<td>First</td> 


(continued) 
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<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 

</body> 

</html> 



Table Background Colors and Images 

This example demonstrates how to add a background to a table, as shown in Figure 
11.13. 


Try it yourself » 


<html> 

<body> 

<h4>A background color:</h4> 
<table border="l" bgcolor="gray"> 
<tr> 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 
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<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 

<h4>A background image:</h4> 

<table border="l" background="bgdesert.jpg"> 
<tr> 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 

</body> 

</html> 


A background color: 


First 

Row 

Second 

Row 


A background imago: 


l^st^lRo 

y 

JSecodd Rc 

4 J 



Figure 11.13 
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Cell Background Colors and Images 

The following example demonstrates how to add a background to one or more table 
cells. The result is shown in Figure 11.14. 


Try it yourself » 


<html> 

<body> 

<h4>Cell backgrounds:</h4> 

<table border="l"> 

<tr> 

<td bgcolor="gray">First</td> 
<td>Row</td> 

</tr> 

<tr> 

<td background="bgdesert.jpg"> 
Second</td> 

<td>Row</td> 

</tr> 

</table> 

</body> 

</html> 


Cell backgrounds: 



Figure 11.14 


Aligning Cell Content 

This sample code demonstrates how to use the al i gn attribute to align the content 
of cells to create a neatly organized table. The results of the code are shown in Figure 
11.15. 


Try it yourself » 


<html> 
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<body> 

<table width="400" border="l"> 

<tr> 

<th align="left">Money spent on....</th> 
<th align="right">January</th> 

<th align="right">February</th> 

</tr> 

<tr> 

<td align="left">Clothes</td> 

<td align="right">$241.10</td> 

<td align="right">$50.20</td> 

</tr> 

<tr> 

<td align="left">Make-up</td> 

<td align="right">$30.00</td> 

<td align="right">$44.45</td> 

</tr> 

<tr> 

<td align="left">Food</td> 

<td align="right">$730.40</td> 

<td align="right">$650.00</td> 

</tr> 

<tr> 

<th align="left">Sum</th> 

<th align="right">$1001.50</th> 

<th align="right">$744.65</th> 

</tr> 

</table> 

</body> 

</html> 


Money spent on.... 

Jan nary' 

February 

Clothes 

$241,10 

$50 20 

Make-Up 

$30.00 

$44.45 

Food 

S73Q.40 

$650.00 

Sum 

S1001.50 

$744.65 


Figure 11.15 
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frame Attribute 

This example demonstrates how to use the frame attribute to control the borders 
around the table. The results of these examples appear in Figures 11.16 through 
11.18. If you see no frames around the tables in your browser, either your browser 
is too old or it does not support the attribute. 


Try it yourself » 


<html> 

<body> 

<h4>with frame="border":</h4> 
<table frame="border"> 

<tr> 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 

<h4>with frame="box":</h4> 
<table frame="box"> 

<tr> 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 

<h4>with frame="void":</h4> 
<table frame="voi d"> 

<tr> 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 
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</table> 

<html> 

<body> 



<html> 

<body> 

<h4>with frame="above":</h4> 

<table frame="above"> 

<tr> 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 

<h4>with frame="below":</h4> 

<table frame="below"> 

<tr> 

(continued) 
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(continued) 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 

<h4>with frame="hsides":</h4> 
<table frame="hsides"> 

<tr> 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 

</body> 

</html> 


With frame="above": 


First Row 
Second Row 

With frame= "below”: 

First Row 
Second Row 

With fra nie="b$ ides": 

First Row 
Second Row 

Figure 11.17 
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Try it yourself » 


<html> 

<body> 

<h4>with frame="vsides":</h4> 
<table frame="vsides"> 

<tr> 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 

<h4>with frame="lhs":</h4> 
<table frame="lhs"> 

<tr> 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 

<h4>with frame="rhs":</h4> 
<table frame="rhs"> 

<tr> 

<td>First</td> 

<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 

<td>Row</td> 

</tr> 

</table> 


(continued) 
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(continued) 

</body> 

</html> 



Using frame and border to Control 
Table Borders 

You can use the frame and border attributes to control the borders around the 
table. If you see no frames around the tables in these examples, your browser does 
not support the frame attribute. 


Try it yourself » 


<html> 

<body> 

<table frame="hsides" border= ,, 3"> 
<tr> 

<td>First row</td> 

</tr> 

</table> 

<br /> 

<table frame="vsides" border="3"> 
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<tr> 

<td>First row</td> 
</tr> 

</table> 

</body> 

</html> 

First row 


|First row 

Figure 11.19 


Table Tags 


TAG 

DESCRIPTION 

<table> 

Defines a table 

<th> 

Defines a table header 

<tr> 

Defines a table row 

<td> 

Defines a table cell 

<caption> 

Defines a table caption 

<colgroup> 

Defines groups of table columns 

<col> 

Defines the attribute values for one or 
more columns in a table 

<thead> 

Defines a table head 

<tbody> 

Defines a table body 

<tfoot> 

Defines a table footer 
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CHAPTER 12 


HTML LISTS 


In This Chapter 

□ Unordered Lists 

□ Ordered Lists 

□ Definition Lists 

□ Nested Lists 


Unordered Lists 

HTML supports ordered, unordered, and definition lists. You can also nest one list 
within another. 

An unordered list is a list of items. The list items are marked with bullets (typically 
small black circles), as shown in Figure 12.1. 


« Tutorials 



HTML &. css 

REFERENCES 

• HTML 4 Tag Reference 

• HTML 4 Event Reference 

• HTML 5 Tag Reference 

• HTML Color Reference 

• HTML Color Picker 

• HTML Color Mixer 

• XHTML Tag Reference 

• CSS Reference 


Figure 12.1 
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An unordered list starts with the <ul > tag. Each list item starts with the <1 i > tag. 
Figure 12.2 displays how it looks in a browser. 


Try it yourself » 


<html> 

<body> 

<h4>An unordered List:</h4> 
<ul> 

<1i>Coffee</li> 

<1i>Tea</li> 

<li>Milk</li> 

</ul> 

</body> 

</html> 


Ad Unordered List: 

* Coffee 

* Tea 

* Milk _ 

Figure 12.2 


Inside a list item, you can put paragraphs, line breaks, images, links, other lists, and 
so on. 

You can display different kinds of bullets in an unordered list by using the type 
attribute. Figure 12.3 shows lists marked with discs, circles, and squares. 


Try it yourself » 


<html> 

<body> 

<h4>Disc bullets list:</h4> 

<ul type="disc"> 

<1i>Apples</li> 

<1i>Bananas</li> 

<1i>Lemons</li> 

</ul> 

(continued) 
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(continued) 

<h4>Circle bullets list:</h4> 
<ul type="circle"> 

<1i>Apples</l i> 

<1i>Bananas</l i> 
<li>Lemons</li> 

</ul> 

<h4>Square bullets list:</h4> 
<ul type="square"> 

<1i>Apples</l i> 

<1i>Bananas</li> 
<li>Lemons</li> 

</ul> 

</body> 

</html> 


Disc bullets list; 

* Apples 

* Bananas 

* Lemons 

Circle bullets list: 

o Apples 
o Bananas 
o Lemons 

Square bullets list: 

■ Apples 

■ Bananas 

■ Lemons 

Figure 12.3 
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Ordered Lists 

An ordered list is also a list of items; the list items are numbered sequentially rather 
than bulleted. 

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. 
Figure 12.4 shows how the ordered list appears in the browser. 


Try it yourself » 


<html> 

<body> 

<h4>An Ordered List:</h4> 
<ol > 

<li>Coffee</li> 

<1i>Tea</li> 
<li>Milk</li> 

</ol> 

</body> 

</html> 


Ad Ordered List: 

L Coffee 
2. Tea 
3- Milk 


Figure 12.4 


Different Types of Ordering 

You can display different kinds of ordered lists by using the type attribute. Figure 
12.5 shows lists marked with uppercase and lowercase letters; Figure 12.6 shows 
lists with uppercase and lowercase Roman numerals. 


Try it yourself » 


<html> 

<body> 


(continued) 
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(continued) 

<h4>Letters list:</h4> 

<ol type="A"> 

<1i>Apples</l i> 

<1i>Bananas</li> 

<1i>Lemons</li> 

</ol> 

<h4>Lowercase letters list:</h4> 
<ol type="a"> 

<1i>Apples</l i> 

<li>Bananas</li> 

<1i>Lemons</li> 

</ol> 

</body> 

</html> 


Letters list: 

A. Apples 
B- Bananas 
C. Lemons 

Lowercase letters list: 

a. Apples 

b. Bananas 

c. Lemons 

Figure 12.5 


Try it yourself » 


<html> 

<body> 

<h4>Roman numbers list:</h4> 
<ol type="l"> 

<1i>Apples</l i> 

<1i>Bananas</li> 
<li>Lemons</li> 
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</ol> 

<h4>l_owercase Roman numbers list:</h4> 
<ol type= ,, i"> 

<li>Apples</li> 

<1i>Bananas</li> 

<1i>Lemons</li> 

</ol> 

</body> 

</html> 


Roman cambers List: 

L Apples 
IL Bananas 
m. Lemons 

Lowercase Rom a a a ambers list: 

L Apples 
ii. Bananas 
m Lemons 

Figure 12.6 


Definition Lists 

A definition list is not a list of single items. It is a list of items (terms), together with 
a description of each item (term). 

A definition list starts with a <dl > tag (definition list). 

Each term starts with a <dt> tag (definition term). 

Each description starts with a <dd> tag (definition description). 

Figure 12.7 shows how the definition list in the following example appears in a 
browser. 
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Try it yourself » 


<html> 

<body> 

<h4>A Definition List:</h4> 
<dl> 

<dt>Coffee</dt> 

<dd>Black hot drink</dd> 
<dt>Mi1k</dt> 

<dd>white cold drink</dd> 
</dl> 

</body> 

</html> 


A Definition List; 

Coffee 

Black hot drink 

Milk 

White cold drink 

Figure 12.7 


Inside the <dd> tag you can put paragraphs, line breaks, images, links, other lists, 
and so on. 


Nested Lists 

A nested list is a list within another list. Usually the second list is indented another 
level and the item markers will appear differently than the original list, as shown in 
Figure 12.8. 


Try it yourself » 


<html> 

<body> 

<h4>A nested List:</h4> 
<ul> 

<1i>Coffee</li> 
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<1i>Tea 
<ul> 

<li>Black tea</li> 
<li>Green tea</li> 
</ul> 

</l i > 

<li>Milk</li> 

</ul> 

</body> 

</html> 


A nested List: 

* Coffee 
» Tea 

o Black tea 
o Green tea 

• Milk 


Figure 12.8 


Nested lists can be several levels deep, as shown in Figure 12.9. 


Try it yourself » 


<html> 

<body> 

<h4>A nested List:</h4> 
<ul> 

<1i>Coffee</li> 
<li>Tea 
<ul> 

<li>Black tea</li> 
<li>Green tea 
<ul> 

<1 i >chi na</l i > 

<1i>Africa</li> 
</ul> 

</l i> 

</ul> 


(continued) 
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(continued) 

</l i> 

<1 i>Mi1k</li> 
</ul> 

</body> 

</html> 


A nested List: 

* Coffee 

* Tea 

o Black tea 
o Green tea 

■ China 

■ Africa 

* Milk 

Figure 12.9 


List Tags 


TAG 

DESCRIPTION 

<ol> 

Defines an ordered list 

<ul> 

Defines an unordered list 

<h> 

Defines a list item 

<dl> 

Defines a definition list 

<dt> 

Defines a term (an item) in a defini¬ 
tion list 

<dd> 

Defines a description of a term in a 
definition list 

<dir> 

Deprecated. Use <ul> instead 

<menu> 

Deprecated. Use <ul> instead 
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CHAPTER 13 


HTML FORMS 
& INPUT 


In This Chapter 

□ Forms 

□ input Tag and Attributes 

□ action Attribute 

□ Form Examples 


Forms 

HTML forms are used to collect different kinds of user input. A form is an area that 
can contain form elements. 

Form elements are elements that allow the user to enter information in a form (like 
text fields, text area fields, drop-down menus, radio buttons, check boxes, and so 
on). 


A simple form example appears in Figure 13.1. 
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A form is defined with the <form> tag: 
<form> 

input elements 
</form> 


input Tag and Attributes 

The most used form tag is the <i nput> tag. The type of input is specified with 
the type attribute. The following types are the most commonly used input types. 


Text Fields 

Text fields are used when you want the user to type letters, numbers, and so on in 
a form. The form appears as shown in Figure 13.2. Note that the form itself is not 
visible. 


Try it yourself » 


<html> 

<body> 

<form action=""> 

First name: 

<input type="text" name="firstname" /> 
<br /> 

Last name: 

<input type="text" name="lastname" /> 
</form> 

</body> 

</html> 




First name: 

Last name: 





Figure 13.2 
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TIP 


In most browsers, the width of the text field is 20 characters by default. 


Check Boxes 

This example demonstrates how to create check boxes on an HTML page like the 
ones shown in Figure 13.3. A user can select or deselect a check box. 


Try it yourself » 


<html> 

<body> 

<form action=""> 

I have a bike: 

<input type="checkbox" name="vehicle" value="Bike"> 

<br /> 

I have a car: 

<input type="checkbox" name="vehicle" value="Car"> 

<br /> 

I have an airplane: 

<input type="checkbox" name="vehicle" value="Airplane"> 
</form> 

</body> 

</html> 


I have a bike: D 
I have a car Q 
1 have an airplane: □ 

Figure 13.3 
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Radio Buttons 

The example demonstrated in Figure 13.4 shows how to create radio buttons on an 
HTML form. When a user clicks a radio button, that button becomes selected, and 
all other buttons in the same group become deselected. 


Try it yourself » 


<html> 

<body> 

<form action=""> 

Male: 

<input type="radio" checked= ,, checked" 
name="Sex" value="male"> 

<br> 

Female: 

<input type="radio" 
name="Sex" value="femal e"> 

</form> 

</body> 

</html> 


Male: © 
Female: O 


Figure 13.4 


Drop-Down List 

The next example shows how to create a simple drop-down list on an HTML page. 
A drop-down list is a selectable list. 


Try it yourself » 


<html> 

<body> 

<form action=""> 
<select name="cars"> 
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<option value="volvo">volvo</option> 
<option value="saab">Saab</option> 
<opti on val ue="fiat">Fi at</option> 
<option value="audi">Audi</option> 
</select> 

</form> 


</body> 

</html> 



Figure 13.5 


You can also display a simple drop-down list with a value preselected on the list, as 
shown in Figure 13.6. 


Try it yourself » 


<html> 

<body> 

<form action=""> 

<select name="cars"> 

<option value="volvo">volvo</opti on> 

<option value="saab">Saab</option> 

<option value="fiat" selected="selected">Fiat</option> 
<option value="audi">Audi</option> 

</select> 

</form> 

</body> 

</html> 


|Fiat v 
Figure 13.6 
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Text Area 

Using a textarea (a multiline text input control) like the one in Figure 13.7, you can 
write an unlimited number of characters. A textarea can be in a form or elsewhere 
on a page. 


Try it yourself » 


<html> 

<body> 


<textarea rows="10" cols="30"> The cat was playing in the 
garden. </textarea> 


</body> 

</html> 



The cat was playing in the 
garden. 



Figure 13.7 


Buttons 

Buttons are common items on a form. This example demonstrates how to create a 
button. You can define your own text on the face of the button. The results of this 
code appear in Figure 13.8. 


Try it yourself » 


<html> 

<body> 

<form action=""> 
<input type="button" 
</form> 


104 


value="Hello world!"> 













Chapter 13: HTML Forms & Input 


</body> 

</html> 


[ Hello world! ] 

Figure 13.8 


Fieldset 

A fieldset is a grouping of data fields. This example demonstrates how to draw a 
border with a caption around your data, as shown in Figure 13.9. 


Try it yourself » 


<html> 

<body> 

<fie1dset> 

<1egend> 

Health information: 

</legend> 

<form action=""> 

Height <input type="text" size="3"> 
weight <input type="text" size= ,, 3"> 

</form> 

</fie1 dset> 

<P> 

if there is no border around the input form, your browser is 
too old. 

</p> 

</body> 

</html> 


— Health information: 

Heiglit | I Weight | | 


If there is no border around the input form, your browser is too old. 

Figure 13.9 


105 















Learn HTML and CSS with w3schools 


action Attribute 

When the user clicks the Submit button, the content of the form is sent to the 
server. The form’s action attribute defines the name of the file to send the con¬ 
tent to. The file defined in the acti on attribute usually does something with the 
received input. 

<form name="input" action="html_form_submit.asp" 
method="get"> 

Username: 

<input type="text" name="user" /> 

<input type="submit" value="Submit" /> 

</form> 

Figure 13.10 shows how it looks in a browser. If you type some characters in the 
text field and click the Submit button, the browser sends your input to a page called 
"html_form_submit.asp". The page will show you the received input. 


Username: [ Submit | 

Figure 13.10 


Form Examples 

This example demonstrates how to add a form to a page. The form contains two 
input fields and a Submit button. The resulting form appears in Figure 13.11. 


Try it yourself » 


<html> 

<body> 


<form name="input" action="html_form_action.asp" 
method="get"> 


Type your first name: 

<input type="text" name="FirstName" value="Mickey 
<br>Type your last name: 

<input type="text" name="LastName" value="Mouse" 
<br> 

<input type="submit" value="Submit"> 


" size="20"> 

size="20"> 
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</form> 

<P> 

If you click the "Submit" button, you will send your input 
to a new page called html_form_action.asp. 

</p> 

</body> 

</html> 

Type your first name; Mickey _ 

Type your last name; Mouse 
[ Submit ] 

If you diek the "Submit" button, you will send your input to a new page called 
htmlformaction. asp. 


Figure 13.11 


Form with Check Boxes 

The following form contains three check boxes and a Submit button. The results of 
the code appear in Figure 13.12. 


Try it yourself » 


<html> 

<body> 

<form name="input" action="html_form_action.asp" 
method="get"> 

I have a bike: 

<input type="checkbox" name="vehicle" value="Bike" 
checked="checked" /> 

<br /> 

I have a car: 

<input type="checkbox" name="vehicle" value="Car" /> 

<br /> 

I have an airplane: 

<input type="checkbox" name="vehicle" value="Airplane" /> 
<br /xbr /> 

<input type="submit" value="Submit" /> 

</form> 


(continued) 
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(continued) 

<P> 

If you click the "Submit" button, you send your input to a 
new page called html_form_action.asp. 

</p> 


</body> 

</html> 


I have a bike: E! 

I have a car □ 

I have an airplane: □ 

[ Submit 

If you click the "Submit 11 button, you send your input to a new page called 
htmlfonnaction. asp. 

Figure 13.12 


Form with Radio Buttons 

Figure 13.13 displays a form with two radio buttons and a Submit button. 


Try it yourself » 


<html> 

<body> 

<form name="input" action="html_form_action.asp" 
method="get"> 

Male: 

<input type="radio" name="Sex" value="Male" 
checked="checked"> 

<br> 

Female: 

<input type="radio" name="Sex" value="Femal e"> 
<br> 

<input type ="submit" value ="Submit"> 

</form> 
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to a new page called html_form_action.asp. 

</p> 

</body> 

</html> 


Male: ® 

Female: O 
[ Submit ] 

If you click the "Submit" button, you will send your input to a new page called 
htmlt ormactioti. asp. 

Figure 13.13 


Send E-Mail from a Form 

The next example demonstrates how to send e-mail from a form. The results of the 
code appear in Figure 13.14. 


Try it yourself » 


<html> 

<body> 

<form action="MAll_TO:someone@w3schools.com" method="post" 
enctype="text/plain"> 

<h3>This form sends an e-mail to w3Schools.</h3> 

Name:<br> 

<input type="text" name="name" 
value="yourname" size="20"> 

<br> 

Mai 1:<br> 

<input type="text" name= ,, maiT' 
value="yourmail" size="20"> 

<br> 

Comment:<br> 

<input type="text" name="comment" 
value="yourcomment" size="40"> 

<brxbr> 

<input type="submit" value="Send"> 

<input type='Teset" value="Reset"> 


(continued) 
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(continued) 

</form> 

</body> 

</html> 


This form sends an e-mail to \V3Schools. 

Name: 

lyoumame | 

MaiL 

yourmail 

Comment: _ 

yourcomment 

[ Send 11 Reset | 


Figure 13.14 


Form Tags 


TAG 

DESCRIPTION 

<form> 

Defines a form for user input 

<input> 

Defines an input field 

<textarea> 

Defines a textarea (a multiline text input control) 

<label> 

Defines a label to a control 

<fieldset> 

Defines a fieldset 

<legend> 

Defines a caption for a fieldset 

<select> 

Defines a selectable list (a drop-down box) 

<optgroup> 

Defines an option group 

<option> 

Defines an option in the drop-down box 

<button> 

Defines a pushbutton 

<isindex> 

Deprecated. Use <i nput> instead 


no 
































CHAPTER 14 


HTML COLOR 


In This Chapter 

□ Color Values 

□ 16 Million Different Colors 

□ Web Standard Color Names 

□ Color Names Supported by All Browsers 

□ Web Safe Colors? 

□ Shades of Gray 


Color Values 

HTML colors are defined using a hexadecimal (hex) notation for the combination 
of Red, Green, and Blue color values (RGB). The lowest value that can be given to 
one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). 

Hex values are written as three double-digit numbers, starting with a # sign, such 
as #9ACD32. 


E Because this book is not printed in full color, it may be hard to see the 
some of the examples displayed in this chapter. You may want to consult 
the www.w3schools.com/html site to study working with color in HTML 
more closely. 

The results of these codes are shown in Figure 14.1. 


Color Values 


COLOR 

COLOR HEX 

COLOR RGB 

Black 

#000000 

rgb(0,0,0) 

Red 

#FF0000 

rgb(255,0,0) 

Green 

#00FF00 

rgb(0,255,0) 

Blue 

#0000FF 

rgb(0,0,255) 

Yellow 

#FFFF00 

rgb(255,255,0) 

Cyan 

#00FFFF 

rgb(0,255,255) 


(continued) 
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(continued) 


Magenta 

#FFOOFF 

rgb(255,0,255) 

Gray 

#cococo 

rgb(192,192,192) 

White 

#FFFFFF 

rgb(255,255,255) 


Try it yourself » 


<html> 

<body> 

<p style="backg round-col or:#C0C0C0"> 

Color set by using hex value 

</p> 

<p style="backg round-col or:rgb(192,192,192)"> 
Color set by using rgb value 

</p> 

<p style="backg round-col or:gray"> 

Color set by using color name 

</p> 

</body> 

</html> 



Figure 14.1 


16 Million Different Colors 

The combination of Red, Green and Blue values from 0 to 255 gives you a total of 
more than 16 million colors to play with (256 x 256 x 256). Most modern monitors 
are capable of displaying at least 16,384 colors. 

If you look at the color table at http://www.w3schools.com/html/html_colors.asp, 
you will see the result of varying the red light from 0 to 255, while keeping the 
green and blue light at zero. 
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Web Standard Color Names 

The World Wide Web Consortium (W3C) has listed 16 valid color names for 


HTML and CSS: 

►► 

Aqua 

►► 

Black 

►► 

Blue 

►► 

Fuchsia 

►► 

Gray 

►► 

Green 

►► 

Lime 

►► 

Maroon 

►► 

Navy 

►► 

Olive 

►► 

Purple 

►► 

Red 

►► 

Silver 

►► 

Teal 

►► 

White 

►► 

Yellow 


If you want to use other colors, you should specify their HEX values. 


Color Names Supported by All 
Browsers 

The W3C HTML and CSS standards have listed only 16 valid color names. How¬ 
ever, a collection of nearly 130 color names are supported by all major browsers. 

E The complete list of color names supported by all major browsers is 
available on the w3schools Web site: http://www.w3schools.com/html/ 
h tml_colornames. asp. 


NOTE 


These additional names are not a part of the W3C Web standard. If you 
want valid HTML or CSS, use the HEX values instead. 
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Web Safe Colors? 


Some years ago, when computers supported a maximum of 256 different colors, a 
list of 216 “Web Safe Colors” was suggested as a Web standard, reserving 40 fixed 
system colors. This cross-browser color palette was created to ensure that all com¬ 
puters would display the colors correctly when running a 256-color palette. This 
is not important now, because most computers can display millions of different 
colors. 



The complete list of Web Safe Colors is found at http://www.w3schools. 
com/html/html_colors. asp. 


Shades of Gray 


Gray colors are displayed using an equal amount of power to all of the light sources. 
To make it easier for you to select the right gray color, we have compiled the follow¬ 
ing table of gray shades. 



You will find the same table of gray shades at http://www.w3schools.com/ 
html/html_colors. asp. \ 


GRAY SHADES 

COLOR HEX 

COLOR RGB 


#000000 

rgb(0,0,0) 


#080808 

rgb(8,8,8) 


#101010 

rgb(16,16,16) 

#181818 

rgb (24,24,24) 

#202020 

rgb(32,32,32) 

#282828 

rgb(40,40,40) 


#303030 

rgb(48,48,48) 


#383838 

rgb(56,56,56) 


#404040 

rgb(64,64,64) 


#484848 

rgb(72,72,72) 


#505050 

rgb(80,80,80) 


#585858 

rgb(88,88,88) 


#606060 

rgb(96,96,96) 


#686868 

rgb(104,104,104) 


#707070 

rgb(l 12,112,112) 


#787878 

rgb(120,120,120) 


#808080 

rgb(128,128,128) 
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#888888 

rgb(136,136,136) 


#909090 

rgb(l44,l44,l44) 


#989898 

rgb(152,152,152) 


#A0A0A0 

rgb(160,160,160) 


#A8A8A8 

rgb(168,168,168) 


#B0B0B0 

rgb(176,176,176) 


#B8B8B8 

rgb(184,184,184) 


#cococo 

rgb(192,192,192) 


#C8C8C8 

rgb(200,200,200) 


#D0D0D0 

rgb(208,208,208) 


#D8D8D8 

rgb(216,216,216) 


#E0E0E0 

rgb(224,224,224) 


#E8E8E8 

rgb(232,232,232) 


#F0F0F0 

rgb(240,240,240) 


#F8F8F8 

rgb(248,248,248) 


#FFFFFF 

rgb(255,255,255) 
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CHAPTER 15 


HTML 4.01 
QUICK LIST 


The following is an HTML Quick List from the first half of this book. 

You can view or print this quick list from the w3schools Web site at www. 
w3schools.com/html/html_quick.asp 



HTML Basic Document 

<html> 

<head> 

<title>Document name goes here</title> 
</head> 

<body> 

visible text goes here 
</body> 

</html> 


Heading Elements 

<hl>l_argest Heading</hl> 
<h2> . . . </h2> 

<h3> . . . </h3> 

<h4> . . . </h4> 

<h5> . . . </h5> 
<h6>Smallest Heading</h6> 


Text Elements 

<p>This is a paragraph</p> 

<br /> (line break) 

<hr /> (horizontal rule) 

<pre>This text is preformatted</pre> 
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Logical Styles 

<em>This text is emphasized</em> 
<strong>This text is strong</strong> 
<code>This is some computer code</code> 


Physical Styles 

<b>This text is bo1d</b> 
<i>This text is italic</i> 


Links, Anchors, and Image Elements 

<a href="http://www.example.com/">This is a Linl«/a> 

<a href="http://www.example.com/"ximg src="URL" 
alt="Alternate Text"x/a> 

<a href= ,, mailto:webmaster@example.com">Send e-mail</a> 

A named anchor: 

<a name="tips">useful Tips Section</a> 

<a href="#tips">Jump to the useful Tips Section</a> 


Unordered (Bulleted) List 

<ul> 

<li>First item</li> 

<li>Next item</li> 

</ul> 


Ordered (Numbered) List 

<ol > 

<li>First item</li> 

<li>Next item</li> 

</ol> 
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Definition List 

<dl> 

<dt>First term</dt> 
<dd>Defini ti on</dd> 
<dt>Next term</dt> 
<dd>Defini ti on</dd> 
</dl> 


Tables 

<tab1e border="l"> 
<tr> 

<th>someheader</th> 

<th>someheader</th> 

</tr> 

<tr> 

<td>sometext</td> 

<td>sometext</td> 

</tr> 

</table> 


Frames 

<frameset cols="25%,75%"> 
<frame src="pagel.htm"> 
<frame src="page2.htm"> 
</frameset> 


Forms 


<form action="http://www.example.com/test.asp" 
get"> 

<input type="text" name="lastname" value="Nixon 
maxiength="50"> 

<input type= ,, password"> 

<input type="checkbox" checked="checked"> 

<input type="radio" checked="checked"> 


method="post/ 
" size="30" 
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<input type="submit"> 

<input type="reset"> 

<input type="hidden"> 

<select> 

<option>Apples 

<option selected="selected">Apples</option> 

<option selected>Bananas 

<option selected="selected">Bananas</option> 

<option>Cherries 

<option>Cher ries</option> 

</select> 

<textarea name="Comment" rows="60" cols="20"></textarea> 
</form> 


Entities 

&lt; is the same as < 
&gt; is the same as > 
&#169; is the same as © 


Other Elements 

<!-- This is a comment --> 

<blockquote> 

Text quoted from some source. 

</blockquote> 

<address> 

Address l<br> 

Address 2<br> 

City<br> 

</address> 

Source: http://www.w3schools.com/html/html_quick.asp. 
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HTML/CSS 

Advanced 


□ Chapter 16: HTML Layout 

□ Chapter 17: HTML Frames 

□ Chapter 18: HTML Fonts 

□ Chapter 19: Why Use HTML 4.0? 

□ Chapter 20: HTML CSS Styles 

□ Chapter 21: HTML Character Entities 

□ Chapter 22: HTML Head & Meta Elements 

□ Chapter 23: HTML Uniform Resource Locators 

□ Chapter 24: HTML Scripts 

□ Chapter 25: HTML Standard Attributes 

□ Chapter 26: HTML Event Attributes 

□ Chapter 27: HTML URL Encoding 

□ Chapter 28:Turn Your PC Into a Web Server 

□ Chapter 29: HTML & CSS Summary 
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CHAPTER 16 


HTML LAYOUT 


In this Chapter 

□ HTML Layout Using Tables 

Everywhere on the Web, you find pages that are formatted like newspaper pages 
using HTML columns. One very common practice with HTML is to use HTML 
tables to format the layout of an HTML page. 

HTML Layout Using Tables 


A part of this page is formatted with 
two columns, like a newspaper page. 

As you can see on this page, there is 
a left column and a right column. 

This text is displayed in the left col¬ 
umn. 

An HTML <table> is used to 
divide a part of this Web page into 
two columns. 

The trick is to use a table without 
borders, and maybe a little extra cell 
padding. 

No matter how much text you add 
to this table, it will stay inside its 
column borders. 

For more information about creating and formatting tables, see "Chapter 
11, "HTMLTables." 

Dividing a part of an HTML page into table columns is very easy to do. Just set it 
up like the following example. The results are shown in Figure 16.1. 

Try it yourself » 



<html> 

<body> 


<table border="0" width= ,, 100%" cel 1 padding= ,, 10 ,, > 

<tr> 


(continued) 


123 







Learn HTML and CSS with w3schools 


(continued) 

<td wi dth="50%" vali gn="top"> 

This is some text. This is some text. This is some text. 
This is some text. This is some text. 

</td> 


<td wi dth="50%" vali gn="top"> 

Another text. Another text. Another text. Another text. An¬ 
other text. Another text. Another text. 

</td> 


</tr> 

</table> 


</body> 

</html> 


This is some text. This is some text. 

Another text. Another text. 

This is some text. This is some text. 

Another text. Another text. 

This is some text. 

Another text. Another text. 


Another text. 

Figure 16.1 
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CHAPTER 17 


HTML FRAMES 


In This Chapter 

□ frameset Tag 

□ frame Tag 

□ Designing with Frames 

With frames, you can display more than one HTML document in the same browser 
window. Each HTML document is called a frame, and each frame is independent 
of the others. 

The disadvantages of using frames are: 

►► The web developer must keep track of more HTML documents. 

►► It is difficult to print the entire page. 

►► Users often dislike them. 

►► It presents linking challenges. 

►► People often use frames to wrap their own ads and branding around other 
people's content 

frameset Tag 

The <frameset> tag defines how to divide the window into frames. Each frame- 
set defines a set of rows or columns. The values of the rows/columns indicate the 
amount of screen area each row/column will occupy. 


Vertical Frameset 

The following example demonstrates how to make a vertical frameset with three 
different documents. The results of the sample code appear in Figure 17.1 
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Try it yourself » 


<html> 

<frameset cols="25%,50%,25%"> 
<frame src="frame_a.htm"> 
<frame src="frame_b.htm"> 
<frame src="frame_c.htm"> 
</frameset> 

</html> 



NOTE 


Note that the code does not use the <body> tag when a <f rame- 
set> tag is in use. 


Horizontal Frameset 

The following example demonstrates how to make a horizontal frameset with three 
different documents. The results of the sample code appear in Figure 17.2 
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Try it yourself » 


<html> 

<frameset rows="25%,50%, 25%"> 
<frame src="frame_a.htm"> 
<frame src="frame_b.htm"> 
<frame src="frame_c.htm"> 
</frameset> 

</html> 



Figure 17.2 


frame Tag 

The <f rame> tag defines which HTML document will initially open in each frame. 

In the following example, as shown in Figure 17.3, we have a frameset with two 
columns. The first column is set to 23% of the width of the browser window. The 
second column is set to 75% of the width of the browser window. The HTML 
document frame_a.htm is put into the first column, and the HTML document 
frame_b.htm is put into the second column. 
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Try it yourself » 


<frameset cols= M 25%,75% M > 
<frame src="frame_a.htm"> 
<frame src="frame_b.htm"> 
</frameset> 



NOTE 


The frameset column size value can also be set in pixels 
(col s="200,500"), and one of the columns can be set to use the remaining 
space (cols="25%,*"). 


Designing with Frames 

If a frame has visible borders, the user can resize it by dragging the border. To pre¬ 
vent a user from doing this, you can add noresi ze="noresi ze" to the <f rame> 
tag. 
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Although they are less common these days, it’s a good idea to add the <nof rames> 
tag for older or text-based browsers that do not support frames. 
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You cannot use the <body> tags together with the <f rameset> tags. However, if 
you add a<noframes> tag containing some text for browsers that do not support 
frames, you will have to enclose the text in <body> tags. See how it is done in the 
following example. The results of this code appear in Figure 17.4. 


Try it yourself » 


<html> 

<frameset col s="25%,50%,25%"> 

<frame src="frame_a.htm"> 

<frame src="frame_b.htm"> 

<frame src="frame_c.htm"> 

<noframes> 

<body>Your browser does not handle frames!</body> 
</noframes> 

</frameset> 

</html> 


(This browser supports frames, so the noframes text remains invisible.) 
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Mixed Frameset 

The following example demonstrates how to make a frameset with three documents 
and how to mix them in rows and columns, as shown in Figure 17.5. 


Try it yourself » 


<html> 

<frameset rows="50%,50%"> 

<frame src="frame_a.htm"> 

<frameset cols="25%,75%"> 
<frame src="frame_b.htm"> 
<frame src="frame_c.htm"> 
</frameset> 

</frameset> 


</html> 


Frame A 

Frame B 

Frame C 


Figure 17.5 


130 











Chapter 17: HTML Frames 


noresize Attribute 

This example demonstrates the noresi ze attribute. The frames are not resizable. 
Unlike other frames, if you move the mouse over the borders between the frames, 
you will notice that you cannot drag or move the frame borders. 


Try it yourself » 


<html> 

<frameset rows="50%,50%"> 

<frame noresize="noresize" src="frame_a.htm"> 
<frameset cols="25%,75%"> 

<frame noresize="noresize" src="frame_b.htm"> 
<frame noresize="noresize" src="frame_c.htm"> 

</frameset> 

</html> 


Navigation Frame 

This example demonstrates how to make a navigation frame. A navigation frame 
contains a list of links with the second frame as the target. The second frame will 
show the linked document. A sample navigation frame appears in Figure 17.6. 


Try it yourself » 


<html> 

<frameset cols="120,*"> 

<frame src="tryhtml_contents.htm"> 

<frame src="frame_a.htm" name="showframe"> 
</frameset> 

</html> 
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In the first column, the file called tryhtml_contents.htm contains links to three 
documents on the w3schools.com Web site. The source code for the links: 

<a href ="frame_a.htm" target ="showframe">Frame a</axbr> 

<a href ="frame_b.htm" target ="showframe">Frame b</axbr> 

<a href ="frame_c.htm" target ="showframe">Frame c</a> 

Inline Frame 

Frames can also be used within a single HTML page. These are known as inline 
frames. The following example demonstrates how to create an inline frame like the 
one that appears in Figure 17.7. 


Try it yourself » 


<html> 

<body> 

<i frame src="defaul t. asp"x/i frame> 

<p>Some older browsers don't support iframes.</p> 
<p>if they don't, the iframe will not be visible.</p> 
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</body> 

</html> 


uiBschools.com 


HOME HIM L CSS XML J A V ASCRIPT 


BEST WEB HOSTING 



2U A ~ 


Some older browsers don’t support i&ames. 
If they don’t, die iffame will not be visible. 


Figure 17.7 


Jump to 

This example demonstrates two frames. One of the frames has a source to a speci¬ 
fied section in a file. The specified section is made with <a name="ClO"> in the 
link.htm file. The result is shown in Figure 17.8. 


Try it yourself » 


<html> 

<frameset col s="20%,80%"> 
<frame src="frame_a.htm"> 
<frame src="link.htm#ClO"> 
</frameset> 

</html> 
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Frame A 

Chapter 10 


This chapter explains ba bla bla 


Chapter 11 


This chapter explains ba bla bla 


Chapter 12 


This chapter explains ba bla bla 


Chapter 13 


This chapter explains ba bla bla 


Chapter 14 




Figure 17.8 


Jump to a Specified Section 

This example demonstrates two frames. The navigation frame (content.htm) to the 
left contains a list of links with the second frame (link.htm) as a target on the right. 
The second frame shows the linked document. The result is shown in Figure 17.9. 


Try it yourself » 


<html> 

<frameset col s="180,*"> 

<frame src="content.htm"> 

<frame src="link.htm" name="showframe"> 
</frameset> 

</html> 
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Link without Anchor 

Link with Anchor 


Chapter 1 

This chapter explains ba bla bla 

Chapter 2 

This chapter explains ba bla bla 

Chapter 3 

This chapter explains ba bla bla 

Chapter 4 

This chapter explains ba bla bla 

Chapter 5 


A 


V 


Figure 17.9 


One of the links in the navigation frame is linked to a specified section in the target 
file. The HTML code in the file content.htm looks like this: 

<a href ="1 i nk. htm" target ="showf rame">l_i nk without Anchor</ 
axbrxa href ="1 i nk. htm#ClO" target ="showf rame">Li nk 
with Anchor</a>. 


Frame Tags 


TAG 

DESCRIPTION 

<frameset> 

Defines a set of frames 

<frame> 

Defines a sub window (a frame) 

<noframes> 

Defines a noframe section for browsers that do not handle 
frames 

<iframe> 

Defines an inline sub window (frame) 
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HTML FONTS 


In This Chapter 

□ font Tag 

□ font Attributes 

□ Controlling Fonts with Styles 


NOTE 


The <font> tag in HTML is deprecated. It is supposed to be removed 
in a future version of HTML. Even if a lot of people are using it,you should try to avoid 
it and use styles instead.The tag is explained here to help you understand it if you 
see it used elsewhere on the Web. 


font Tag 

With HTML code like the following example, you can specify both the size and the 
type of the browser output. You can see what the results look like in Figure 18.1. 


Try it yourself » 


<P> 

<font size="2" face="verdana"> 
This is a paragraph. 

</font> 

</p> 

<P> 

<font size="3" face= ,, Times"> 
This is another paragraph. 
</font> 

</p> 

This is a paragraph. 

This is another paragraph. 

Figure 18.1 
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Font Attributes 


ATTRIBUTE 

EXAMPLE 

PURPOSE 

size=" number" 

size="2" 

Defines the font size 

size="+number" 

size= +1 

Increases the font size 

size="-number" 

size= -1 

Decreases the font size 

face="face-name" 

r nnp* m 

race= 1 imes 

Defines the font name 

color= "color-value" 

color= "#eeff00" 

Defines the font color 

color= "color-name" 

color="red" 

Defines the font color 


Controlling Fonts with Styles 

Although it’s explained here, the <font> tag should not be used! The <font> tag 
is deprecated in the latest versions of HTML, which you learn more about in the 
next chapter. 

The World Wide Web Consortium (W3C), an organization that creates and sets 
standards for the Web, has removed the <font> tag from its recommendations. In 
future versions of HTML, style sheets (CSS) will be used to define the layout and 
display properties of HTML elements. 


Font 

This example demonstrates how to set the font of a text, as shown in Figure 18.2. 


Try it yourself » 


<html> 

<body> 

<hl style="font-family:verdana">A heading</hl> 
<p style="font-family:coun'er">A paragraph</p> 
</body> 

</html> 


A heading 

A paragraph 


Figure 18.2 
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Font Size 

This example demonstrates how to set the font size of a text, as shown in Figure 

18.3. 


Try it yourself » 


<html> 

<body> 

<hl style="font-size:150%">A heading</hl> 
<p style="font-size:80%">A paragraph</p> 
</body> 

</html> 


A heading 

A paragraph 


Figure 18.3 


Font Color 

This example demonstrates how to set the color of a text, as shown in Figure 18.4. 


Try it yourself » 


<html> 

<body> 

<hl style="color:blue">A blue heading</hl> 
<p style="color:red">A red paragraph</p> 
</body> 

</html> 


A blue heading 

A red paragraph 


Figure 18.4 
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The colors described in the code samples in this chapter are shown in grayscale in 
the figures. To see the full-color sample results, go to: 



http: / / www. w3schools. com/html/html_fonts. asp 


Font, Font Size, and Font Color 

This example demonstrates how to set the font, font size, and font color of a text at 
the same time, as shown in Figure 18.3. 


Try it yourself » 


<html> 

<body> 

<p style="font-fami ly:verdana;font-size: 80 %;col or:green"> 

This is a paragraph with some green text in it. This is a 
paragraph with some green text in it. This is a paragraph 
with some green text in it. This is a paragraph with some 
green text in it. 

</p> 

</body> 

</html> 


This is a paragraph with some green text in it. This is a paragraph with 
some green text in it* This is a paragraph with some green text in it* 
This is a paragraph with some green text in it. 


Figure 18.5 


More About Style Sheets 



The remaining chapters in this book focus on working with styles. In the 
following chapters, we will explain why some tags, like <font>, are to be 
removed from the HTML recommendations, and how to insert a style 
sheet in an HTML document. 



To learn more about style sheets, check out Learn CSS with w3schools , 
also from Wiley Publishing, and try the CSS Tutorial at w3schools.com. 


139 









CHAPTER 19 


WHY USE HTML 4.0? 


In This Chapter 

□ HTML 3.2 Was Very Wrong! 

□ Enter HTML 4.0 

HTML 3.2 Was Very Wrong! 

The original HTML was never intended to contain tags for formatting a document. 
HTML tags were intended to define the content of the document like: 

<p>This is a paragraph</p> 

<hl>This is a heading</hl> 


When tags like <font> and col or attributes were added to the HTML 3.2 spec¬ 
ification, it started a nightmare for Web developers. Development of large Web 
sites where fonts and color information had to be added to every single Web page, 
became a long, expensive, and unduly painful process. 


Enter HTML 4.0 

In HTML 4.0, all formatting can be removed from the HTML document and 
stored in a separate style sheet. Because HTML 4.0 separates the presentation from 
the document structure, you finally get what you always needed: total control of 
presentation layout without messing up the document content. 


What Should You Do About It? 

►► Do not use presentation attributes inside your HTML tags if you can avoid 
it. Start using styles! Please read Learn CSS with w3schools to learn more about 
working with style sheets. 

►► Do not use deprecated tags. Visit the w3schools HTML 4.01 Reference to see 
which tags and attributes are deprecated: 
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http: / / www. w3schools. com/html/html_reference. asp 


NOTE 


The official HTML 4.01 recommends the use of lowercase tags. 


Validate Your HTML Files as HTML 4.01 

An HTML document is validated against a Document Type Definition (DTD). 
Before an HTML file can be properly validated, a correct DTD must be added as 
the first line of the file. 

The HTML 4.01 Strict DTD includes elements and attributes that have not been 
deprecated or do not appear in framesets: 

<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"> 


The HTML 4.01 Transitional DTD includes everything in the strict DTD plus 
deprecated elements and attributes: 

<!DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Transitional// en" 

"http://www.w3.org/TR/html4/1oose.dtd"> 


The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus 
frames as well: 

<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01 Frameset//EN" 

"http://www.w3.org/TR/html4/frameset.dtd"> 

Test Your HTML With the W3C Validator 

If you want to check the markup validity of Web documents in HTML, input your 
page address (such as www.w3schools.com) in the box at the Markup Validation 
Service. The Validator is maintained by the W3C. 

http: / / validator. w3. org / 
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CHAPTER 20 

HTML CSS STYLES 


In This Chapter 

□ Styles in HTML 

□ How to Use Styles 

□ Style Tags 

Styles in HTML 

With HTML 4.0, all formatting can be moved out of the HTML document and 
into a separate style sheet. This makes creating, updating, and maintaining the Web 
site much easier. 

The following example demonstrates how to format an HTML document with 
style information added to the <head> section. The results of the sample code 
appear in Figure 20.1. 


Try it yourself » 


<html> 

<head> 

<style type="text/css"> 
hi {color: red} 
h3 {color: blue} 

</style> 

</head> 

<body> 

<hl>This is header l</hl> 
<h3>This is header 3</h3> 
</body> 

</html> 
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This is header 1 

This ts header 3 


Figure 20.1 


Nonunderlined Link 

Links are underlined by default in the browser page. The following example dem¬ 
onstrates how to display a link that is not underlined by default, using a style 
attribute. The results of the sample code appear in Figure 20.2. 


Try it yourself » 


<html> 

<body> 

<a href="lastpage.htm" 
style="text-decoration:none"> 
THIS IS A LINK! 

</a> 

</body> 

</html> 


THIS IS A LINK! 


Figure 20.2 
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Link to an External Style Sheet 

This example demonstrates how to use the <1 i nlo tag to link to an external style 
sheet. The results of the sample code appear in Figure 20.3. 


Try it yourself » 


<html> 

<head> 

<link rel="stylesheet" type="text/css" href="styles.css" > 
</head> 

<body> 

<hl>i am formatted with a linked style sheet</hl> 

<p>Me too!</p> 

</body> 

</html> 


I am formatted with a linked style 
sheet 

Me too! 

Figure 20.3 



The linked style sheets in the sample codes in this chapter are located on 
the w3schools.com server, so the sample code works best if you use the 
Try It Yourself editor. Go to http://www.w3schools.com/html and click 
Try it yourself. 


How to Use Styles 

When a browser reads a style sheet, it formats the document according to the 
instructions in the sheet. There are three types of style sheets: external, internal, 
and inline. 
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External Style Sheet 

An external style sheet is ideal when the style is applied to many pages. With an 
external style sheet, you can change the look of an entire Web site by changing one 
file. Each page must link to the style sheet using the <1 i nk> tag. The <1 i nk> tag 
goes inside the <head> section. 

<head> 

<link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head> 

Internal Style Sheet 

An internal style sheet should be used when a single document has a unique style. 
You define internal styles in the <head> section with the <styl e> tag. The results 
of the sample code appear in Figure 20.4. 


Try it yourself » 


<head> 

<style type="text/css"> 
body {background-color: gray} 
p {margin-left: 20px} 

</style> 

</head> 

<p>The left margin is indented 20 pixels.</p> 


The left margm is indented 20 pixels. 


Figure 20.4 
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Inline Styles 

An inline style should be used when a unique style is to be applied to a single occur¬ 
rence of an element. To use inline styles, you use the styl e attribute in the relevant 
tag. The styl e attribute can contain any CSS property. 

The example shown in Figure 20.5 demonstrates how to change the background 
color and the left margin of a paragraph. 


Try it yourself » 


<p style="color: red; margin-left: 20px"> 

This is a paragraph. It's colored red and indented 20px. 

</p> 


This is a paragraph. It T s colored red and indented 20px. 


Figure 20.5 


NOTE 


style sheets. 


Read Learn CSS with w3schools to learn more about working with 


Style Tags 


TAG 

DESCRIPTION 

<style> 

Defines a style definition 

<link> 

Defines a resource reference 

<div> 

Defines a section in a document 

<span> 

Defines a section in a document 

<font> 

Deprecated. Use styles instead 

<basefont> 

Deprecated. Use styles instead 

<center> 

Deprecated. Use styles instead 
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CHAPTER 21 


HTML CHARACTER 

ENTITIES 


In This Chapter 

□ Character Entities 

□ Nonbreaking Space 

□ Commonly Used Character Entities 


Character Entities 

Some characters are reserved in HTML. For example, you cannot use the greater 
than or less than signs within your text because the browser could mistake them 
for markup. If you want the browser to actually display these characters, you must 
insert character entities in the HTML source. 

A character entity looks like this: &enti ty_name ; or &#enti ty_number; 

To display a less than sign, you must write: &11; or &#60; 

The advantage of using an entity name instead of a number is that the name often 
is easier to remember. However, the disadvantage is that browsers may not support 
all entity names (while the support for entity numbers is very good). 

The following example lets you experiment with character entities. The results of 
the code appear in Figure 21.1. 


Try it yourself » 


<html> 

<body> 


<hl>Character Entities</hl> 
<p>Code: &x;</p> 

<P> 
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(continued) 

Substitute the "X" with an entity number like "#174" or an 
entity name like "pound" to see the result, use the table 
in the next section to try different character entities. 

</p> 

<p>&cent;</p> 

<p>&#174;</p> 

<p>&amp;</p> 

</body> 

</html> 


Character Entities 

Code: &X; 

Substitute the "X" with an entity number like ”#174" or an entity name like 
"pound" to see the result Use the table in the next section to try different 
character entities. 

0 

& 

Figure 21.1 


Nonbreaking Space 

The most common character entity in HTML is the nonbreaking space. 

Normally, HTML truncates spaces in your text. If you write 10 spaces in your text, 
HTML will remove 9 of them. To add lots of spaces to your text, use the &nbsp; 
character entity. 
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Commonly Used Character Entities 


[ 


NOTE 


Entity names are case sensitive! 


RESULT 

DESCRIPTION 

ENTITY NAME 

ENTITY NUMBER 


nonbreaking space 

&nbsp; 

&#160; 

< 

less than 

&lt; 

&#60; 

> 

greater than 

&gt; 

&#62; 

& 

ampersand 

&amp; 

&# 38; 


cent 

&cent; 

&# 162; 

£ 

pound 

&pound; 

&# 163; 

¥ 

yen 

&yen; 

&#165; 

€ 

euro 

&euro; 

&#8364; 

§ 

section 

&sect; 

&# 167; 

© 

copyright 

&copy; 

&# 169; 

® 

registered 

trademark 

&reg; 

&# 174; 


For a complete reference of all character entities, visit the w3schools HTML Enti¬ 
ties Reference: 


http: / / www. w3schools. com/tags/ref_entities. asp 
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CHAPTER 22 


HTML HEAD AND 
META ELEMENTS 


In This Chapter 

□ Head Element 

□ Meta Element 

Head Element 

The head element <head> contains general information, also called meta¬ 
information, about a document. Meta means “information about”. You can say that 
meta-data means information about data, or meta-information means information 
about information. The head element includes important information such as the 
document’s title, style instructions, and more. 


What's Inside the Head Element? 

According to the HTML standard, only a few tags are legal inside the head section. 
The legal tags include the following: 

►► <base> 

►► <title> 

►► <meta> 

►► <link> 

►► <style> 

►► <script> 

E—n. You learned more about the <link> and <style> tags in Chapter 20, 
“HTML CSS Styles.” 

The elements inside the <head> element are not intended to be displayed by a 
browser. Look at the following illegal construct: 
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Try it yourself » 


<head> 

<p>This is some text</p> 

</head> 

In this example, the browser has two options: 

►► Display the text because it is inside a <p> element. 

►► Hide the text because it is inside a <head> element. 

As Figure 22.1 demonstrates, if you put an HTML element like <hl> or <p> inside 
a head element like this, most browsers will display it, even if it is illegal. 

This is some text 

Figure 22.1 


Should browsers forgive you for errors like this? We don’t think so. Others do. 

title Tag 

The document’s title information inside a head element is not displayed in the 
browser window, but is used for indexing and cataloging. The result of the follow¬ 
ing code is shown in Figure 22.2. 


Try it yourself » 


<html> 

<head> 

<title>The document title is hidden</title> 
</head> 

<body> 

<p>This text is displayed</p> 

</body> 

</html> 


This text is displayed 

Figure 22.2 
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base Tag 

The example illustrated in Figure 22.3 demonstrates how to use the <base> tag to 
let all the links on a page open in a new window. 


Try it yourself » 


<html> 

<head> 

<base target= ,, _blank"> 

</head> 

<body> 

<P> 

<a href="http://www.w3schools.com" 
target="_bl ank">Thi s 1 i nl«/a> 

will load in a new window because the target attribute is 
set to "_blank". 

</p> 

<P> 

<a href="http://www.w3schools.com"> 

This linl«/a> 

will also load in a new window even without a target attri¬ 
bute. 

</p> 

</body> 

</html> 


This link will load in a new window because the target attribute is set to 
"_blank". 

This link will also bad in a new window even without a target attribute, 

Figure 22.3 
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Head Tags 


TAG 

DESCRIPTION 

<head> 

Defines information about the document 

<title> 

Defines the document title 

<base> 

Defines a base URL for all the links on a page 

<link> 

Defines a resource reference 

<meta> 

Defines meta information 

<!DOCTYPE> 

Defines the document type and tells the browser which 
version of the markup language the page is written in. 
This tag goes before the <html > start tag. 


A full list of legal attributes for each element is listed in the w3schools Complete 
HTML Reference online at: 



http: / / www. w3schools. com/tags 


Meta Element 

As discussed earlier in the last section, the head element contains general informa¬ 
tion (meta-information) about a document. 

HTML also includes a meta element <meta> that goes inside the head element. 
The purpose of the meta element is to provide meta-information about the docu¬ 
ment. Most often the meta element is used to provide information that is relevant 
to browsers or search engines, like describing the content of your document. 

The meta attributes in the following example identify the document’s author, edi¬ 
tor, and the software used to create the page. 

<html> 

<head> 

<meta name="author" 
content="Jan Egil Refsnes"> 

<meta name="revised" 

content="Michael Woodward,3/14/2010"> 


<meta name="generator 


(continued) 
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(continued) 

content="Microsoft Frontpage 5.0"> 
</head> 

</html> 


You can see a complete list of the meta element attributes in the w3schools.com 
HTML 4.01 Tag Reference: 


http://www.w3schools.com/html/html_reference.asp 


Keywords for Search Engines 

Information inside a meta element can also describe the document’s keywords, 
which are used by search engines to find your page when a user conducts a search 
on the keyword. 


Try it yourself » 


<html> 

<head> 

<meta name="description" 
content="HTML examples'^ 

<meta name="keywords" 

content="HTML, dhtml, CSS, xml, JavaScript, VBScript"> 

</head> 

<body> 

<P> 

The meta attributes of this document describe the document 
and its keywords. 

</p> 

</body> 

</html> 
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The intention of the name and content attributes is to describe the content of a 
page, such as: 

<meta name="descn'ption M content="Free web tutorials on 
HTML, CSS, XML, and SML" /> 

<meta name= ,, keywords" content="HTML, dhtml, CSS, xml, 
JavaScript" /> 


Some search engines on the Web will use the <name> and <content> attributes 
of the meta tag to index your pages. However, because too many Webmasters have 
used meta tags for spamming, like repeating keywords to give pages a higher search 
ranking, some search engines have stopped using them entirely. 

You can read more about search engines in the w3schools.com Web Building Tuto¬ 
rial at: 

http: / / www. w3schools. com/site/ 


Unknown Meta Attributes 

Sometimes you will see meta attributes that are unknown to you, such as: 

<meta name="security" content= M low" /> 

Then you just have to accept that this is something unique to the site or to the 
author of the site, and that it has probably no relevance to you. 


Redirect a User 

This example demonstrates how to redirect a user if your site address has changed. 


Try it yourself » 


<html> 

<head> 

<meta http-equiv="Refresh" 

content="5;url=http://www.w3schools.com"> 

</head> 

<body> 

<P> 

Sorry! we have moved! The new URL is: <a href="http://www. 
w3schools.com">http://www.w3schools.com</a> 

</p> 


(continued) 
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(continued) 

<P> 

You will be redirected to the new address in five seconds. 

</p> 

<P> 

if you see this message for more than 5 seconds, please 
click on the link above! 

</p> 

</body> 

</html> 


NOTE 


The W3 Consortium states that "Some user agents support 
the use of META to refresh the current page after a specified number of sec¬ 
onds, with the option of replacing it by a different URL. Authors should not 
use this technique to forward users to different pages, as this makes the page 
inaccessible to some users. Instead, automatic page forwarding should be 
done using server-side redirects." For more information, visit the W3 Web site: 


http: / / www. w3. org/TR/html4/struct/global. html#adef-http-equiv 
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HTML UNIFORM 
RESOURCE 
LOCATORS 


In This Chapter 

□ Uniform Resource Locator (URL) 

□ URL Schemes 

□ Using Links 

Uniform Resource Locator (URL) 

Something called a uniform resource locator (URL) is used to address a document 
(or other data) on the World Wide Web. When you click on a link in an HTML 
document, an underlying <a> tag points to a place (an address) on the Web with an 
href attribute value like this: 

<a href="lastpage.htm">Last Page</a> 

The lastpage.htm link in the example is a link that is relative to the Web site that 
you are browsing, and your browser will construct a full Web address to access the 
page, such as: 

http://www.w3schools.com/html/Iastpage.htm 
A full Web address follows these syntax rules: 
scheme://host. domai n : port/path/fil ename 

►► The scheme is defining the type of Internet service. The most common type is 
http. 

►► The domain is defining the Internet domain name like w3schools.com. 

►► The host is defining the domain host. If omitted, the default host for http is 

WWW. 

►► The :port is defining the port number at the host. The port number is nor¬ 
mally omitted. The default port number for http is 80. 
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►► The path is defining a path (a subdirectory) at the server. If the path is omitted, 
the resource (the document) must be located at the root directory of the Web 
site. 

►► The filename is defining the name of a document. The default filename might 
be default.asp, index.html, or something else depending on the settings of the 
Web server. 

URL Schemes 


Some examples of the most common schemes can be found in the following table: 


SCHEMES 

ACCESS 

file 

a file on your local PC 

ftp 

a file on an FTP server 

http 

a file on a World Wide Web Server 

gopher 

a file on a Gopher server 

news 

a Usenet newsgroup 

telnet 

a Telnet connection 

WAIS 

a file on a WAIS server 


Accessing a Newsgroup 

The following HTML code: 

<a href="news:alt.html ">html Newsgroup</a> 

creates a link to a newsgroup. 

Downloading with FTP 

The following HTML code: 

<a href="ftp://www.w3schools.com/ftp/winzip.exe">Download 
wi nzi p</a> 

creates a link to an FTP directory. (The link doesn’t work. Don’t try it. It’s just an 
example. w3schools doesn't really have an FTP directory.) 


Link to your Mail system 

The following HTML code: 

<a href="mai1 to:someone@w3schools.com">someone@w3schools. 
com</a> 

creates a link that opens a new e-mail message addressed to the address in the link. 
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Using Links 

The following sample code shows how to use the three types of URL links described. 
Results of the code appear in Figure 23.1. 


Try it yourself » 


<html> 

<body> 

<pxa href="news : al t. html ">HTML Newsgroup</ax/p> 

<pxa href="ftp://www. w3school s . com/ftp/wi nzi p. exe">Download 
wi nzi p</ax/p> 

<pxa href="mai 1 to: someone@w3school s . com">someone@w3schoo1 s . 
com</ax/p> 

</body> 

</html> 


HTML Newsgoup 

Download WinZip 
someone fg! w3schools, com 

Figure 23.1 
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HTML SCRIPTS 


In This Chapter 

□ Insert a Script into a Page 

□ How to Handle Older Browsers 

□ noscript Tag 

□ Script Tags 

Insert a Script into a Page 

Add scripts to HTML pages to make them more dynamic and interactive. A script 
in HTML is defined with the <scri pt> tag. 

This example demonstrates how to insert a script into your HTML document. 
Note that you will have to use the type attribute to specify the scripting language. 
The following script produces the output shown in Figure 24.1. 


Try it yourself » 


<html> 

<body> 

<script type="text/javascript"> 
document.write("Hello world!") 
</script> 

</body> 

</html> 


Hdfo World! 

Figure 24.1 


To learn more about scripting in HTML, read w3schools’ JavaScript tutorial at: 


http://www.w3schools.com/js/ 
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How to Handle Older Browsers 

A browser that does not recognize the <script> tag at all will display the <script> 
tag’s content as text on the page. To prevent the browser from doing this, you 
should hide the script in comment tags. An old browser (that does not recognize the 
<scri pt> tag) will ignore the comment, and it will not write the tag’s content on 
the page. On the other hand, a new browser will understand that the script should 
be executed, even if it is surrounded by comment tags. 

JavaScript: 

<script type="text/javascrTpt"> 

<!- 

document.write("Hello world!") 

//-> 

</script> 

VBScript: 

<script type="text/vbscript"> 

<!- 

document.write("Hel1o world!") 

-> 

</script> 


The following example demonstrates how to prevent browsers that do not support 
scripting from displaying text unintentionally. The results appear in Figure 24.2. 


Try it yourself » 


<html> 

<body> 

<script type="text/javascript"> 

<! — 

document.write("lf this is displayed, your browser supports 
scripting!") 

//--> 

</script> 

<noscript>No JavaScript support!</noscript> 

</body> 

</html> 


If this is displayed, your browser supports scripting! 


Figure 24.2 
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noscript Tag 

In addition to hiding the script inside a comment, you can also add a <noscri pt> 
tag. 

The cnoscri pt> tag is used to define an alternate text if a script is NOT executed. 
This tag is used for browsers that recognize the <scri pt> tag, but do not support 
the script inside, so these browsers will display the text inside the cnoscri pt> tag 
instead. However, if a browser supports the script inside the cscri pt> tag it will 
ignore the cnoscri pt> tag. 

JavaScript: 

cscript type="text/javascript"> 
c! — 

document.write("Hel1o world!") 

//-> 
c/script> 

cnoscript>Your browser does not support JavaScript !</ 
noscript> 

VBScript: 

cscript type="text/vbscript"> 
c!- 

document.write("Hel1o world!") 

1 --> 

c/script> 

cnoscript>Your browser does not support VBScript!c/noscript> 


Script Tags 


TAG 

DESCRIPTION 

cscript> 

Defines a script 

cnoscript> 

Defines an alternate text if the script is not executed 

cobject> 

Defines an embedded object 

cparam> 

Defines runtime settings (parameters) for an object 

capplet> 

Deprecated. Use cobject> instead 
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HTML STANDARD 
ATTRIBUTES 


In This Chapter 

□ Core Attributes 

□ Language Attributes 

□ Keyboard Attributes 

HTML tags can have attributes. The special attributes for each tag are listed under 
each tag description. The attributes listed here are the core and language attributes 
that are standard for all tags (with a few exceptions). 


Core Attributes 


Not valid in base, head, html, meta, param, script, style, and title ele¬ 
ments. 


ATTRIBUTE 

VALUE 

DESCRIPTION 

class 

class rule or style rule 

The class of the element 

id 

id name 

A unique id for the element 

style 

style definition 

An inline style definition 

title 

tooltip_text 

A text to display in a tool tip 


Language Attributes 

Not valid in base, br, frame, frameset, hr, iframe, param, and script ele¬ 
ments. 


ATTRIBUTE 

VALUE 

DESCRIPTION 

dir 

ltr | rtl 

Sets the text direction 

lang 

language_code 

Sets the language code 
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Keyboard Attributes 


ATTRIBUTE 

VALUE 

DESCRIPTION 

accesskey 

character 

Sets a keyboard shortcut to access an element 

tabindex 

number 

Sets the tab order of an element 
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HTML EVENT 
ATTRIBUTES 


In This Chapter 

□ Window Events 

□ Form Element Events 

□ Keyboard Events 

□ Mouse Events 


New to HTML 4.0 is the ability to let HTML events trigger actions in the browser, 
like starting a JavaScript when a user clicks on an HTML element. The following 
tables list attributes that can be inserted into HTML tags to define event actions. 

E lf you want to learn more about programming with these events, you 
should study w3schools’ tutorials on JavaScript and DHTML: 

JavaScript: http: //www.w3schools. com/js 
DHTML: http: //www.w3schools. com/dhtml 


Window Events 


These attributes are valid only in body and frameset elements. 


ATTRIBUTE 

VALUE 

DESCRIPTION 

onload 

script 

Script to be run when a document loads 

onunload 

script 

Script to be run when a document unloads 
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Form Element Events 


These attributes are valid only in form elements. 


ATTRIBUTE 

VALUE 

DESCRIPTION 

onchange 

script 

Script to be run when the element changes 

onsubmit 

script 

Script to be run when the form is submitted 

onreset 

script 

Script to be run when the form is reset 

onselect 

script 

Script to be run when the element is selected 

onblur 

script 

Script to be run when the element loses focus 

onfocus 

script 

Script to be run when the element gets focus 


Keyboard Events 

These attributes are not valid in base, bdo, br, frame, frameset, head, 
html , iframe, meta, param, script, style, and title elements. 


ATTRIBUTE 

VALUE 

DESCRIPTION 

onkeydown 

script 

What to do when key is pressed 

onkeypress 

script 

What to do when key is pressed and released 

onkeyup 

script 

What to do when key is released 


Mouse Events 


These attributes are not valid in base, bdo, br, frame, frameset, head, 
html, iframe, meta, param, script, style, and ti tl e elements. 


ATTRIBUTE 

VALUE 

DESCRIPTION 

onclick 

script 

What to do on a mouse click 

ondblclick 

script 

What to do on a mouse double-click 

onmousedown 

script 

What to do when mouse button is pressed 

onmousemove 

script 

What to do when mouse pointer moves 

onmouseout 

script 

What to do when mouse pointer moves out 
of an element 

onmouseover 

script 

What to do when mouse pointer moves over 
an element 

onmouseup 

script 

What to do when mouse button is released 
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CHAPTER 27 


HTML URL 
ENCODING 


In This Chapter 

□ URL Encoding 

□ Common URL Encoding Characters 


URL Encoding 

URL encoding converts characters into a format that can be safely transmitted over 
the Internet. 


As you learned in Chapter 23, "HTML Uniform Resource Locators," Web brows¬ 
ers request pages from Web servers by using a URL. The URL is the address of a 
Web page like http://www.w3schools.com. 


URLs can only be sent over the Internet using the ASCII character set. ASCII is a 
7-bit character set containing 128 characters. It contains the numbers from 0-9, the 
uppercase and lowercase English letters from A to Z, and some special characters. 



See Appendix G, "HTML ISO-8839-1 
ASCII character set. 


Reference," 


for the complete 


Because URLs often contain characters outside the ASCII set, the URL has to be 
converted. URL encoding converts the URL into a valid ASCII format. It replaces 
unsafe ASCII characters with "%" followed by two hexadecimal digits correspond¬ 
ing to the character values in the ISO-8859-1 character set. ISO-8859-1 is the 
default character set in most browsers. 


The first 128 characters of ISO-8859-1 are the original ASCII character set (the 
numbers from 0-9, the uppercase and lowercase English alphabet, and some special 
characters). The higher part of ISO-8859-1 (codes from 160-255) contains the 
characters used in Western European countries and some commonly used special 
characters. 


See Appendix H, "HTML 
^ ^ ISO-8859-1 character set. 


Symbol Entities Reference" for the complete 
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URLs cannot contain spaces. URL encoding normally replaces a space with a + 
sign. 

Common URL Encoding Characters 


CHARACTER 

URL ENCODING 

€ 

%80 

£ 

%A3 

© 

%A9 

® 

%AE 

A 

%co 

A 

%C1 

A 

%C2 

A 

%C3 

A 

%C4 

A 

%C5 

space 

%20 


E See the w3schools' HTML Language Code Reference for the complete 
URL Encoding reference. 
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CHAPTER 28 


TURN YOUR PC INTO 
A WEB SERVER 


In This Chapter 

□ Your Windows PC as a Web Server 

□ Installing IIS on Windows Vista and Windows 7 

□ Installing IIS on Windows XP and Windows 2000 

□ Testing Your Web 

□ Your Next Step: A Professional Web Server 


Your Windows PC as a Web Server 

If you want other people to view your pages, you must publish them. To publish 
your work, you must save your pages on a Web server. 

Your own PC can act as a Web server if you install Internet Information Server (IIS) 
or Personal Web Server (PWS). IIS or PWS turns your computer into a Web server. 
Microsoft IIS and PWS are free Web server components. 


NOTE 


Mac OS X users can also run their own local web server sim¬ 
ply by checking the "Web Sharing" option in the Systems Sharing prefer¬ 
ence and then sticking their .html/.css/..Web files in their "Sites" folder. 
See:http://docs.info.apple.com/article.html?path=Mac/10.6/en/8236.html 


Internet Information Server (IIS) 

IIS is a set of Internet-based services for servers created by Microsoft for use with 
Microsoft Windows. IIS comes with Windows 2000, XP, Vista, and 7. It is also 
available for Windows NT. 

IIS is easy to install and ideal for developing and testing Web applications. IIS 
includes Active Server Pages (ASP), a server-side scripting standard that can be used 
to create dynamic and interactive Web applications. 
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If you want to know more about ASP, see the w3schools ASP tutorial: 



http: / / www. w3 schools. com/asp 


Personal Web Server (PWS) 

PWS is for older Windows systems like Windows 93, 98, and NT. PWS is easy to 
install and can be used for developing and testing Web applications including ASP. 


NOTE 


We don't recommend running PWS for anything other than training. 
It is outdated and has security issues. 


Windows Web Server Versions 

Not all versions of Windows support IIS and/or PWS, but most do. Here’s a rela¬ 
tively complete list. 

►► Windows 7 Home, Professional, Enterprise, and Ultimate come with IIS 7.5 

►► Windows Vista Business, Enterprise and Ultimate come with IIS 7 

►► Windows Vista Home Premium comes with IIS 7 

►► Windows Vista Home Edition does not support PWS or IIS 

►► Windows XP Professional comes with IIS 5.1 

►► Windows XP Home Edition does not support IIS or PWS 

►► Windows 2000 Professional comes with IIS 5.0 

►► Windows NT Professional comes with IIS 3 and also supports IIS 4 

►► Windows NT Workstation supports PWS and IIS 3 

►► Windows Me does not support PWS or IIS 

►► Windows 98 comes with PWS 

►► Windows 95 supports PWS 

Installing IIS on Windows Vista and 
Windows 7 

Follow these steps to install IIS on Windows Vista or 7: 

1. Open the Control Panel from the Start menu. 

2. Double-click Programs and Features. 
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3. Click “Turn Windows features on or off” (a link to the left). 

4. Select the check box for Internet Information Services (IIS), and click OK. 

After you install IIS, be sure to run Microsoft Update to install all patches for bugs 
and security problems. Test your Web, as explained later in this chapter. 

Installing IIS on Windows XP and Win¬ 
dows 2000 

Follow these steps to install IIS on Windows XP and Windows 2000: 

1. On the Start menu, click Settings and select Control Panel. 

2. Double-click Add or Remove Programs. 

3. Click Add/Remove Windows Components. 

4. Click Internet Information Services (IIS). 

3. Click Details. 

6. Select the check box for World Wide Web Service, and click OK. 

7. In Windows Component selection, click Next to install IIS. 

After you install IIS, be sure to run Microsoft Update to install all patches for bugs 
and security problems. Test your Web, as described next. 

Testing Your Web 

After you install IIS or PWS, follow these steps: 

1. Look for a new folder called Inetpub on your hard drive. 

2. Open the Inetpub folder, and find a folder named wwwroot. 

3. Create a new folder under wwwwroot and name it something like “MyWeb.” 

4. Write some ASP code and save the file as testl.asp in the new folder. 

5. Make sure your Web server is running. 

6. Open your browser and type a http://localhost/MyWeb/testl .asp” to view your 
first Web page. 


NOTE 


Look for the IIS (or PWS) symbol in your Start menu or taskbar.The 
program has functions for starting and stopping the Web server, disabling and 
enabling ASP, and much more. 
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Installing PWS on Windows 95 , 98 , and Windows 
NT 

Follow these steps to install PWS on Windows 95, 98, and Windows NT: 

►► Windows 98. Open the Add-ons folder on your Windows CD, find the PWS 
folder and double-click runsetup.exe to install PWS. 

►► Windows 95 or Windows NT. Download Windows NT 4.0 Option Pack 
from Microsoft, and install PWS. 

Test your Web as described earlier. 

Your Next Step: A Professional Web 
Server 

If you do not want to use PWS or IIS, you must upload your files to a public server. 
Most Internet service providers (ISPs) will offer to host your Web pages. If your 
employer has an Internet server, you can ask him to host your Web site. 

If you are really serious about this, you should install your own Internet server. 
Before you select an ISP, be sure you read w3schools Web Hosting Tutorial at: 

http: / / www. w3schools. com/hosting 
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CHAPTER 29 


HTML AND CSS 
SUMMARY 


You Have Learned HTML, Now What? 

This tutorial has taught you how to use HTML to create your own Web site. 

HTML is the universal markup language for the Web. HTML lets you format text, 
add graphics, create links, input forms, frames, and tables, and so on, and save it all 
in a text file that any browser can read and display. 

The key to HTML is the tags, which indicate what content is coming up. 

For more information on HTML, the w3schools.com Web site offers two helpful 
tools you can study: 


ff? 

HTML Examples: http://www.w3schools.com/html/html_examples.asp 

ff? 

HTML Reference: http://www.w3schools.com/tags 


What's Next? 

The next step is to learn CSS. 


CSS 

CSS is used to control the style and layout of multiple Web pages all at once. With 
CSS, all formatting can be removed from the HTML document and stored in a 
separate file. CSS gives you total control of the layout, without messing up the 
document content. 

E You can learn more about styles and CSS in the companion book Learn 
CSS and HTML with w3schools , or by visiting http://www.w3schools. 
com/css. 
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Appendixes 


□ Appendix A: HTML 4.01 Reference 

□ Appendix B: HTML Standard Attributes 

□ Appendix C: HTML Standard Event Attributes 

□ Appendix D: HTML Elements and Valid Doctypes 

□ Appendix E: HTML Character Sets 

□ Appendix F: HTML ASCII Reference 

□ Appendix G: HTML ISO-8859-1 Reference 

□ Appendix H: HTML Symbol Entities Reference 

□ Appendix I: HTML URL Encoding Reference 
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HTML 4.01 
REFERENCE 


If you visit this reference on the w3schools Web site, you will find links for each 
item in the Property column that point to syntax, examples, browser support, and 
so on: 


http: / / www. w3schools. com/tags 


DTD 

This indicates in which HTML 4.01 DTD the tag is allowed. S=Strict, 
T=Transitional, and F=Frameset. 


For more information about DTDs, see Chapter 19, “Why Use HTML 
4.0?” 



For more information about DTDs, visit the w3schools reference HTML 
<!DOCTYPE> Declaration at http://www.w3schools.com/tags/tag_ 
doctype.asp. 


Ordered Alphabetically 


TAG 

DESCRIPTION 

DTD 


Defines a comment 

STF 

<!DOCTYPE> 

Defines the document type 

STF 

<a> 

Defines an anchor 

STF 

<abbr> 

Defines an abbreviation 

STF 

<acronym> 

Defines an acronym 

STF 

<address> 

Defines contact information for the 
author/owner of a document 

STF 
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TAG 

DESCRIPTION 

DTD 

<applet> 

Deprecated. Defines an embedded 
applet 

TF 

<area /> 

Defines an area inside an image-map 

STF 

A 

V 

Defines bold text 

STF 

<base /> 

Defines a default address or a default 
target for all links on a page 

STF 

<basefont /> 

Deprecated. Defines a default font, 
color, or size for the text in a page 

TF 

<bdo> 

Defines the text direction 

STF 

<big> 

Defines big text 

STF 

<blockquote> 

Defines a long quotation 

STF 

<body> 

Defines the document's body 

STF 

<br /> 

Defines a single line break 

STF 

<button> 

Defines a pushbutton 

STF 

<caption> 

Defines a table caption 

STF 

<center> 

Deprecated. Defines centered text 

TF 

<cite> 

Defines a citation 

STF 

<code> 

Defines computer code text 

STF 

<col/> 

Defines attribute values for one or more 
columns in a table 

STF 

<colgroup> 

Defines a group of columns in a table 
for formatting 

STF 

<dd> 

Defines a description of a term in a 
definition list 

STF 

<del> 

Defines deleted text 

STF 

<dfn> 

Defines a definition term 

STF 

<dir> 

Deprecated. Defines a directory list 

TF 

<div> 

Defines a section in a document 

STF 

<dl> 

Defines a definition list 

STF 

<dt> 

Defines a term (an item) in a definition 
list 

STF 

<em> 

Defines emphasized text 

STF 

<fieldset> 

Defines a border around elements in a 
form 

STF 

<font> 

Deprecated. Defines font, color, and size 
for text 

TF 

<form> 

Defines an HTML form for user input 

STF 
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TAG 

DESCRIPTION 

DTD 

< frame /> 

Defines a window (a frame) in a frameset 

L 

<frameset> 

Defines a set of frames 

L 

<hl> to <h6> 

Defines HTML headings 

STL 

<head> 

Defines information about the docu¬ 
ment 

STL 

<hr /> 

Defines a horizontal line 

STL 

<html> 

Defines an HTML document 

STL 

<i> 

Defines italic text 

STL 

<iframe> 

Defines an inline frame 

TF 

<img /> 

Defines an image 

STL 

<input /> 

Defines an input control 

STL 

<ins> 

Defines inserted text 

STL 

<isindex> 

Deprecated. Defines a searchable index 
related to a document 

TF 

<kbd> 

Defines keyboard text 

STF 

<label> 

Defines a label for an input element 

STF 

<legend> 

Defines a caption for a fieldset element 

STF 

<li> 

Defines a list item 

STF 

<link /> 

Defines the relationship between a 
document and an external resource 

STF 

<map> 

Defines an image-map 

STF 

<menu> 

Deprecated. Defines a menu list 

TF 

<meta /> 

Defines metadata about an HTML 
document 

STF 

<noframes> 

Defines an alternate content for users 
that do not support frames 

TF 

<noscript> 

Defines an alternate content for users 
that do not support client-side scripts 

STF 

<object> 

Defines an embedded object 

STF 

<ol> 

Defines an ordered list 

STF 

<optgroup> 

Defines a group of related options in a 
select list 

STF 

<option> 

Defines an option in a select list 

STF 

<P> 

Defines a paragraph 

STF 

<param /> 

Defines a parameter for an object 

STF 

<pre> 

Defines preformatted text 

STF 
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TAG 

DESCRIPTION 

DTD 

<q> 

Defines a short quotation 

STF 

<s> 

Deprecated. Defines strikethrough text 

TF 

<samp> 

Defines sample computer code 

STF 

<script> 

Defines a client-side script 

STF 

<select> 

Defines a select list (drop-down list) 

STF 

<small> 

Defines small text 

STF 

<span> 

Defines a section in a document 

STF 

<strike> 

Deprecated. Defines strikethrough text 

TF 

<strong> 

Defines strong text 

STF 

< stylo 

Defines style information for a docu¬ 
ment 

STF 

<sub> 

Defines subscripted text 

STF 

<sup> 

Defines superscripted text 

STF 

<table> 

Defines a table 

STF 

<tbody> 

Groups the body content in a table 

STF 

<td> 

Defines a cell in a table 

STF 

<textarea> 

Defines a multiline text input control 

STF 

<tfoot> 

Groups the footer content in a table 

STF 

<th> 

Defines a header cell in a table 

STF 

<thead> 

Groups the header content in a table 

STF 

<title> 

Defines the title of a document 

STF 

<tr> 

Defines a row in a table 

STF 

<tt> 

Defines teletype text 

STF 

<u> 

Deprecated. Defines underlined text 

TF 

<ul> 

Defines an unordered list 

STF 

<var> 

Defines a variable part of a text 

STF 

<xmp> 

Deprecated. Defines preformatted text 



Ordered by Function 


TAG 

DESCRIPTION 

DTD 

Basic 

<!DOCTYPE> 

Defines the document type 

STF 

<html> 

Defines an FiTML document 

STF 

<body> 

Defines the document's body 

STF 
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TAG 

DESCRIPTION 

DTD 

<hl> to <h6> 

Defines HTML headings 

STF 

<P> 

Defines a paragraph 

STF 

<br /> 

Inserts a single line break 

STF 

<hr /> 

Defines a horizontal line 

STF 


Defines a comment 

STF 

Formatting 

<acronym> 

Defines an acronym 

STF 

<abbr> 

Defines an abbreviation 

STF 

<address> 

Defines contact information for the 
author/owner of a document 

STF 

<b> 

Defines bold text 

STF 

<bdo> 

Defines the text direction 

STF 

<big> 

Defines big text 

STF 

<blockquote> 

Defines a long quotation 

STF 

<center> 

Deprecated. Defines centered text 

TF 

<cite> 

Defines a citation 

STF 

<code> 

Defines computer code text 

STF 

<del> 

Defines deleted text 

STF 

<dfn> 

Defines a definition term 

STF 

<em> 

Defines emphasized text 

STF 

<font> 

Deprecated. Defines font, color, and size 
for text 

TF 

<i> 

Defines italic text 

STF 

<ins> 

Defines inserted text 

STF 

<kbd> 

Defines keyboard text 

STF 

<pre> 

Defines preformatted text 

STF 

<q> 

Defines a short quotation 

STF 

<s> 

Deprecated. Defines strikethrough text 

TF 

<samp> 

Defines sample computer code 

STF 

<small> 

Defines small text 

STF 

<strike> 

Deprecated. Defines strikethrough text 

TF 

<strong> 

Defines strong text 

STF 

<sub> 

Defines subscripted text 

STF 

<sup> 

Defines superscripted text 

STF 

<tt> 

Defines teletype text 

STF 
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TAG 

DESCRIPTION 

DTD 

<u> 

Deprecated. Defines underlined text 

TF 

<var> 

Defines a variable part of a text 

STF 

<xmp> 

Deprecated. Defines preformatted text 


Forms 

<form> 

Defines an HTML form for user input 

STF 

<input /> 

Defines an input control 

STF 

<textarea> 

Defines a multiline text input control 

STF 

<button> 

Defines a pushbutton 

STF 

<select> 

Defines a select list (drop-down list) 

STF 

<optgroup> 

Defines a group of related options in a 
select list 

STF 

<option> 

Defines an option in a select list 

STF 

<label> 

Defines a label for an input element 

STF 

<fieldset> 

Defines a border around elements in a 
form 

STF 

<legend> 

Defines a caption for a fieldset element 

STF 

<isindex> 

Deprecated. Defines a searchable index 
related to a document 

TF 

Frames 

< frame /> 

Defines a window (a frame) in a frameset 

F 

<frameset> 

Defines a set of frames 

F 

<noframes> 

Defines an alternate content for users 
that do not support frames 

TF 

<iframe> 

Defines an inline frame 

TF 

Images 



<img /> 

Defines an image 

STF 

<map> 

Defines an image-map 

STF 

<area /> 

Defines an area inside an image-map 

STF 

Links 



<a> 

Defines an anchor 

STF 

<link /> 

Defines the relationship between a 
document and an external resource 

STF 

Lists 

<ul> 

Defines an unordered list 

STF 

<ol> 

Defines an ordered list 

STF 
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TAG 

DESCRIPTION 

DTD 

<n> 

Defines a list item 

STF 

<dir> 

Deprecated. Defines a directory list 

TF 

<ai> 

Defines a definition list 

STF 

<dt> 

Defines a term (an item) in a definition 
list 

STF 

<dd> 

Defines a description of a term in a 
definition list 

STF 

<menu> 

Deprecated. Defines a menu list 

TF 

Tables 

<table> 

Defines a table 

STF 

<caption> 

Defines a table caption 

STF 

<th> 

Defines a header cell in a table 

STF 

<tr> 

Defines a row in a table 

STF 

<td> 

Defines a cell in a table 

STF 

<thead> 

Groups the header content in a table 

STF 

<tbody> 

Groups the body content in a table 

STF 

<tfoot> 

Groups the footer content in a table 

STF 

<col/> 

Defines attribute values for one or more 
columns in a table 

STF 

<colgroup> 

Defines a group of columns in a table 
for formatting 

STF 

Styles 

<style> 

Defines style information for a docu¬ 
ment 

STF 

<div> 

Defines a section in a document 

STF 

<span> 

Defines a section in a document 

STF 

Meta Info 



<head> 

Defines information about the docu¬ 
ment 

STF 

<title> 

Defines the document title 

STF 

<meta> 

Defines metadata about an HTML 
document 

STF 

<base /> 

Defines a default address or a default 
target for all links on a page 

STF 

<basefont /> 

Deprecated. Defines a default font, 
color, or size for the text in a page 

TF 
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TAG 

DESCRIPTION 

DTD 

Programming 

<script> 

Defines a client-side script 

STF 

<noscript> 

Defines an alternate content for users 
that do not support client-side scripts 

STF 

<applet> 

Deprecated. Defines an embedded 
applet 

TF 

<object> 

Defines an embedded object 

STF 

<param /> 

Defines a parameter for an object 

STF 


184 














APPENDIX B 


HTML 

STANDARD 

ATTRIBUTES 


The attributes listed in this appendix are standard. They are supported by all HTML 
and tags with a few exceptions. 

If you visit this reference on the w3schools Web site, you will find links for each 
item in the Attribute column that point to syntax, examples, tips, browser support, 
and so on: 


http: / / www. w3schools. com/tags/ref_s tandardattributes. asp 


Core Attributes 

Not valid in base, head, html, meta, param, script, style, and title ele¬ 
ments 


ATTRIBUTE 

VALUE 

DESCRIPTION 

class 

classname 

Specifies a classname for an element 

id 

id 

Specifies a unique id for an element 

style 

style definition 

Specifies an inline style for an element 

title 

text 

Specifies extra information about an 
element 
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Language Attributes 

Not valid in base, br, frame, frameset, hr, iframe, param, and script ele¬ 
ments 


ATTRIBUTE 

VALUE 

DESCRIPTION 

dir 

ltr 

Specifies the text direction for the 


rtl 

content in an element 

lang 

language_code 

Specifies a language code for the 
content in an element. Language code 
reference 



For a complete language code reference, visit the w3schools Web site: 
http: / / www. w3schools. com/tags/ref_language_codes. asp 


Keyboard Attributes 


ATTRIBUTE 

VALUE 

DESCRIPTION 

accesskey 

character 

Specifies a keyboard shortcut to access an 
element 

tabindex 

number 

Specifies the tab order of an element 
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APPENDIX C 


HTML STANDARD 
EVENT ATTRIBUTES 


HTML 4 added the ability to let events trigger actions in a browser, like starting a 
JavaScript when a user clicks on an element. 

E To learn more about programming events, please read Learn JavaScript 
and Ajax with w3schools , also from Wiley Publishing, or visit the JavaS¬ 
cript tutorial at www.w3schools.com/js. 

Also be sure to visit the DHTML tutorial at www.w3schools.com/dhtml 


The following tables list the standard event attributes that can be inserted into 
HTML elements to define event actions. 

body and frameset Events 

These attributes can only be used in <body> or <f rameset>: 


ATTRIBUTE 

VALUE 

DESCRIPTION 

onload 

script 

Script to be run when a document loads 

onunload 

script 

Script to be run when a document unloads 


Form Events 

These attributes can be used in form elements. 


ATTRIBUTE 

VALUE 

DESCRIPTION 

onblur 

script 

Script to be run when an element loses focus 

onchange 

script 

Script to be run when an element changes 

onfocus 

script 

Script to be run when an element gets focus 

onreset 

script 

Script to be run when a form is reset 

onselect 

script 

Script to be run when an element is selected 

onsubmit 

script 

Script to be run when a form is submitted 


187 



















Learn HTML and CSS with w3schools 

Image Events 

This attribute can be used with the i mg element. 


ATTRIBUTE 

VALUE 

DESCRIPTION 

onabort 

script 

Script to be run when loading of an image is 
interrupted 


Keyboard Events 

Valid in all elements except base, bdo, br, frame, frameset, head, html, 
iframe, meta, param, script, style, and title. 


ATTRIBUTE 

VALUE 

DESCRIPTION 

onkeydown 

script 

Script to be run when a key is pressed 

onkeypress 

script 

Script to be run when a key is pressed and 
released 

onkeyup 

script 

Script to be run when a key is released 


Mouse Events 


Valid in all elements except base, bdo, br, frame, frameset, head, html, 
iframe, meta, param, script, style, and title. 


ATTRIBUTE 

VALUE 

DESCRIPTION 

onclick 

script 

Script to be run on a mouse click 

ondblclick 

script 

Script to be run on a mouse double-click 

onmousedown 

script 

Script to be run when mouse button is clicked 

onmousemove 

script 

Script to be run when mouse pointer moves 

onmouseout 

script 

Script to be run when mouse pointer moves 
out of an element 

onmouseover 

script 

Script to be run when mouse pointer moves 
over an element 

onmouseup 

script 

Script to be run when mouse button is released 
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APPENDIX D 


HTML 
ELEMENTS AND 
VALID DOCTYPES 


If you visit this reference on the w3schools Web site, you will find links for each 
item in the Tag column that point to syntax, examples, tips, browser support, and 
so on: 


www. w3schools. com/tags/tag_doctype. asp 




more information about DTDs, see Chapter 19, “Why Use HTML 4.0?” 


For more information about DTDs, visit the w3schools reference “HTML <!DOC- 
TYPE> Declaration” at: 



www.w3schools.com/tags/tag_doctype.asp. 


The following table lists all HTML elements and defines which doctype declara¬ 
tions (DTDs) each element appears in. 


TAG 

HTML 4.01 

TRANSITIONAL 

STRICT 

FRAMESET 

<a> 

Yes 

Yes 

Yes 

<abbr> 

Yes 

Yes 

Yes 

<acronym> 

Yes 

Yes 

Yes 

< address > 

Yes 

Yes 

Yes 

<applet> 

Yes 

No 

Yes 

<area / > 

Yes 

Yes 

Yes 

<b> 

Yes 

Yes 

Yes 

<base /> 

Yes 

Yes 

Yes 

cbasefont /> 

Yes 

No 

Yes 

<bdo> 

Yes 

Yes 

Yes 
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TAG 

HTML 4.01 

TRANSITIONAL 

STRICT 

FRAMESET 

<blockquote> 

Yes 

Yes 

Yes 

<body> 

Yes 

Yes 

Yes 

<br /> 

Yes 

Yes 

Yes 

<button> 

Yes 

Yes 

Yes 

<caption> 

Yes 

Yes 

Yes 

<center> 

Yes 

No 

Yes 

<cite> 

Yes 

Yes 

Yes 

<code> 

Yes 

Yes 

Yes 

<col/> 

Yes 

Yes 

Yes 

<colgroup> 

Yes 

Yes 

Yes 

<dd> 

Yes 

Yes 

Yes 

<del> 

Yes 

Yes 

Yes 

<dfn> 

Yes 

Yes 

Yes 

<dir> 

Yes 

No 

Yes 

<div> 

Yes 

Yes 

Yes 

<dl> 

Yes 

Yes 

Yes 

<dt> 

Yes 

Yes 

Yes 

<em> 

Yes 

Yes 

Yes 

<fieldset> 

Yes 

Yes 

Yes 

<font> 

Yes 

No 

Yes 

<form> 

Yes 

Yes 

Yes 

< frame / > 

No 

No 

Yes 

<frameset> 

No 

No 

Yes 

<hl> to <h6> 

Yes 

Yes 

Yes 

<head> 

Yes 

Yes 

Yes 

<hr /> 

Yes 

Yes 

Yes 

<html> 

Yes 

Yes 

Yes 

<i> 

Yes 

Yes 

Yes 

<iframe> 

Yes 

No 

Yes 

<img /> 

Yes 

Yes 

Yes 

<input /> 

Yes 

Yes 

Yes 

<ins> 

Yes 

Yes 

Yes 
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Appendix D: HTML Elements and Valid Doctypes 


TAG 

HTML 4.01 

TRANSITIONAL 

STRICT 

FRAMESET 

<kbd> 

Yes 

Yes 

Yes 

<label> 

Yes 

Yes 

Yes 

<legend> 

Yes 

Yes 

Yes 

<n> 

Yes 

Yes 

Yes 

<link /> 

Yes 

Yes 

Yes 

<map> 

Yes 

Yes 

Yes 

<menu> 

Yes 

No 

Yes 

<meta /> 

Yes 

Yes 

Yes 

<noframes> 

Yes 

No 

Yes 

<noscript> 

Yes 

Yes 

Yes 

<object> 

Yes 

Yes 

Yes 

<ol> 

Yes 

Yes 

Yes 

<optgroup> 

Yes 

Yes 

Yes 

<option> 

Yes 

Yes 

Yes 

<P> 

Yes 

Yes 

Yes 

<param /> 

Yes 

Yes 

Yes 

<pre> 

Yes 

Yes 

Yes 

<q> 

Yes 

Yes 

Yes 

<s> 

Yes 

No 

Yes 

<samp> 

Yes 

Yes 

Yes 

<script> 

Yes 

Yes 

Yes 

<select> 

Yes 

Yes 

Yes 

<small> 

Yes 

Yes 

Yes 

<span> 

Yes 

Yes 

Yes 

<strike> 

Yes 

No 

Yes 

<strong> 

Yes 

Yes 

Yes 

<style> 

Yes 

Yes 

Yes 

<sub> 

Yes 

Yes 

Yes 

<sup> 

Yes 

Yes 

Yes 

<table> 

Yes 

Yes 

Yes 

<tbody> 

Yes 

Yes 

Yes 

<td> 

Yes 

Yes 

Yes 
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TAG 

HTML 4.01 

TRANSITIONAL 

STRICT 

FRAMESET 

<tfoot> 

Yes 

Yes 

Yes 

<th> 

Yes 

Yes 

Yes 

<thead> 

Yes 

Yes 

Yes 

<title> 

Yes 

Yes 

Yes 

<tr> 

Yes 

Yes 

Yes 

<tt> 

Yes 

Yes 

Yes 

<u> 

Yes 

No 

Yes 

<ul> 

Yes 

Yes 

Yes 

<var> 

Yes 

Yes 

Yes 
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APPENDIX E 


HTML 

CHARACTER SETS 



For more information about working with character sets, see Chapter 27, 
“URL Encoding.” 


ASCII Characters 

To display an HTML page correctly, the browser must know what character set to 
use. The character set for the early World Wide Web was ASCII. ASCII supports 
the numbers from 0-9, the uppercase and lowercase English alphabet, and some 
special characters. 

For more about ASCII, see Appendix F, “HTML ASCII Reference.” 



A complete list of the ASCII character set is available at www.w3schools. 
com/tags/ref_ascii.asp. 


ISO-8859-1 Characters 


Because many countries use characters that are not a part of ASCII, the default 
character set for modern browsers is ISO-8859-T. 


^- 1 \ For more about ISO characters, see Appendix G, “HTML ISO-8839-1 

Reference.” 



A complete list of the ISO-8859-1 character set is available at 
w3schools. com/tags / ref_entities. asp. 
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Other ISO Character Sets 

It is the International Organization for Standardization (ISO) that defines the stan¬ 
dard character sets for different alphabets/languages. 


TIP 


If a Web page uses a different character set than ISO-8859-1, it should be speci¬ 
fied in the <meta> tag. 


The different character sets being used around the world are listed in the following 
table: 


CHARACTER SET 

DESCRIPTION 

COVERS 

ISO-8859-1 

Latin alphabet part 1 

North America, Western 
Europe, Latin America, the 
Caribbean, Canada, Africa 

ISO-8859-2 

Latin alphabet part 2 

Eastern Europe 

ISO-8859-3 

Latin alphabet part 3 

SE Europe, Esperanto, mis¬ 
cellaneous others 

ISO-8859-4 

Latin alphabet part 4 

Scandinavia/Baltics (and oth¬ 
ers not in ISO-8859-1) 

ISO-8859-5 

Latin/Cyrillic part 5 

The languages that are using 
a Cyrillic alphabet such as 
Bulgarian, Belarusian, Rus¬ 
sian and Macedonian 

ISO-8859-6 

Latin/Arabic part 6 

The languages that are using 
the Arabic alphabet 

ISO-8859-7 

Latin/Greek part 7 

The modern Greek language 
as well as mathematical sym¬ 
bols derived from the Greek 

ISO-8859-8 

Latin/Hebrew part 8 

The languages that are using 
the Hebrew alphabet 

ISO-8859-9 

Latin 5 part 9 

The Turkish language. Same 
as ISO-8859-1 except Turkish 
characters replace Icelandic 
ones 

ISO-8859-10 

Latin 6 Lappish, Nor¬ 
dic, Eskimo 

The Nordic languages 

ISO-8859-15 

Latin 9 (aka Latin 0) 

Similar to ISO-8859-1 but 
replaces some less common 
symbols with the euro sign 
and some other missing 
characters 
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CHARACTER SET 

DESCRIPTION 

COVERS 

ISO-2022-JP 

Latin/Japanese part 1 

The Japanese language 

ISO-2022-JP-2 

Latin/Japanese part 2 

The Japanese language 

ISO-2022-KR 

Latin/Korean part 1 

The Korean language 


Unicode Standard 

Because the character sets listed in the preceding table are limited in size and are not 
compatible in multilingual environments, the Unicode Consortium developed the 
Unicode Standard. The Consortium’s goal is to replace the existing character sets 
with its standard Unicode Transformation Format (UTF). 

The Unicode Standard covers all the characters, punctuations, and symbols in the 
world. Unicode enables processing, storage, and interchange of text data no matter 
what the platform, no matter what the program, no matter what the language. 


TIP 


The first 256 characters of Unicode character sets correspond to the 256 char¬ 
acters of ISO-8859-1. 


The Unicode Standard has become a success and is implemented in XML, Java, 
ECMAScript (JavaScript), LDAP, CORBA 3.0, WML, and so on. The Unicode 
Standard is also supported in many operating systems and all modern browsers. The 
Unicode Consortium cooperates with the leading standards development organiza¬ 
tions, like ISO, W3C, and ECMA. 


Unicode can be implemented by different character sets. The most commonly used 
encodings are UTF-8 and UTF-16 include the following: 


CHARACTER SET 

DESCRIPTION 

UTF-8 

A character in UTF-8 can be from 1 to 4 bytes long. 
UTF-8 can represent any character in the Unicode 
standard. UTF-8 is backwards compatible with ASCII. 
UTF-8 is the preferred encoding for e-mail and Web 
pages. 

UTF-16 

16-bit Unicode Transformation Format is a variable- 
length character encoding for Unicode, capable of 
encoding the entire Unicode repertoire. UTF-16 is 
used in major operating systems and environments, like 
Microsoft Windows 2000/XP/2003/Vista/CE and the 
Java and .NET byte code environments. 


NOTE 


All HTML 4 processors already support UTF-8, and all XML processors 
support UTF-8 and UTF-16. 
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APPENDIX F 


HTML ASCII 
REFERENCE 


For more information about working with character sets, see Chapter 27, 
“URL Encoding.” 


ASCII Character Set 

The ASCII character set is used to send information between computers on the 
Internet. ASCII stands for the American Standard Code for Information Inter¬ 
change. It was designed in the early 1960s as a standard character set for computers 
and hardware devices like teleprinters and tapedrives. 

ASCII is a 7-bit character set containing 128 characters. It contains the numbers 
from 0-9, the uppercase and lowercase English letters from A to Z, and some special 
characters. The character sets used in modern computers, HTML, and the Internet 
are all based on ASCII. 

The following table lists the 128 ASCII characters and their equivalent HTML 
entity codes. 



A complete list of the ASCII character set 
www. w3schools. com/tags / ref_ascii. asp. 


also available at 


ASCII Printable Characters 


ASCII CHARACTER 

HTML ENTITY CODE 

DESCRIPTION 


&# 32; 

space 

I 

&#33; 

exclamation mark 

M 

&#34; 

quotation mark 

# 

&# 35; 

number sign 

$ 

&#3 6; 

dollar sign 

% 

&# 37; 

percent sign 

& 

&#38; 

ampersand 
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ASCII CHARACTER 

HTML ENTITY CODE 

DESCRIPTION 


&# 39; 

apostrophe 

( 

&#40; 

left parenthesis 

) 

&#41; 

right parenthesis 

* 

&#42; 

asterisk 

+ 

&# 43; 

plus sign 

, 

&#44; 

comma 

- 

&#45; 

hyphen 


&#46; 

period 

/ 

&#47; 

slash 

0 

&#48; 

digit 0 

1 

&#49; 

digit 1 

2 

&# 50; 

digit 2 

3 

&#51; 

digit 3 

4 

&# 52; 

digit 4 

5 

&# 53; 

digit 3 

6 

&# 54; 

digit 6 

7 

&# 55; 

digit 7 

8 

&# 56; 

digit 8 

9 

&#57; 

digit 9 


&# 58; 

colon 

; 

&# 59; 

semicolon 

< 

&#60; 

less-than 

= 

&#61; 

equals-to 

> 

&#6 2; 

greater-than 

? 

&#6 3; 

question mark 

@ 

&#64; 

at sign 

A 

&#65; 

uppercase A 

B 

6c# 66; 

uppercase B 

C 

&#67; 

uppercase C 

D 

&#68; 

uppercase D 

E 

&#69; 

uppercase E 

F 

&#70; 

uppercase F 

G 

&#71; 

uppercase G 

H 

&#72; 

uppercase H 
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ASCII CHARACTER 

HTML ENTITY CODE 

DESCRIPTION 

I 

&#73; 

uppercase I 

j 

&#7 4; 

uppercase J 

K 

&# 75; 

uppercase K 

L 

&#7 6; 

uppercase L 

M 

&# 77; 

uppercase M 

N 

&#78; 

uppercase N 

O 

&#79; 

uppercase O 

P 

&#80; 

uppercase P 

Q 

&#81; 

uppercase Q 

R 

&# 82; 

uppercase R 

S 

&# 83; 

uppercase S 

T 

&#84; 

uppercase T 

U 

&# 85; 

uppercase U 

V 

&#8 6; 

uppercase V 

W 

&#87; 

uppercase W 

X 

&#88; 

uppercase X 

Y 

&# 89; 

uppercase Y 

Z 

&# 90; 

uppercase Z 

[ 

&#91; 

left square bracket 

\ 

&# 92; 

backslash 

] 

&# 93; 

right square bracket 

A 

&#94; 

caret 


&# 95; 

underscore 

' 

&#96; 

grave accent 

a 

&# 97; 

lowercase a 

b 

&# 98; 

lowercase b 

c 

&#99; 

lowercase c 

a 

&#100; 

lowercase d 

e 

&#101; 

lowercase e 

f 

&#102; 

lowercase f 

g 

&#103; 

lowercase g 

h 

&#104; 

lowercase h 

i 

&#103; 

lowercase i 

j 

&#106; 

lowercase j 

k 

&#107; 

lowercase k 
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ASCII CHARACTER 

HTML ENTITY CODE 

DESCRIPTION 

i 

&#108; 

lowercase 1 

m 

&#109; 

lowercase m 

n 

&#110; 

lowercase n 

o 

&#111; 

lowercase o 

P 

&#112; 

lowercase p 

q 

&#113; 

lowercase q 

r 

&#114; 

lowercase r 

s 

&#115; 

lowercase s 

t 

&#116; 

lowercase t 

u 

&#117; 

lowercase u 

V 

&#118; 

lowercase v 

w 

&#119; 

lowercase w 

X 

&#120; 

lowercase x 

y 

&#121; 

lowercase y 

z 

&# 122; 

lowercase z 

{ 

&#123; 

left curly brace 

1 

&# 124; 

vertical bar 

} 

&# 123; 

right curly brace 

- 

&#126; 

tilde 


ASCII Device Control Characters 


The ASCII device control characters were originally designed to control hardware 
devices. Control characters have nothing to do inside an HTML document. 


ASCII CHARACTER 

HTML ENTITY CODE 

DESCRIPTION 

NUL 

&#00; 

null character 

SOH 

&#01; 

start of header 

STX 

&# 02; 

start of text 

ETX 

&#03; 

end of text 

EOT 

&#04; 

end of transmission 

ENQ 

&# 03; 

enquiry 

ACK 

&#06; 

acknowledge 

BEL 

&#07; 

bell (ring) 

BS 

&#08; 

backspace 
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ASCII CHARACTER 

HTML ENTITY CODE 

DESCRIPTION 

HT 

&# 09; 

horizontal tab 

LF 

&#10; 

line feed 

VT 

&#11; 

vertical tab 

FF 

&# 12; 

form feed 

CR 

&#13; 

carriage return 

SO 

&#14; 

shift out 

SI 

&# 15; 

shift in 

DLE 

&#16; 

data link escape 

DC1 

&#17; 

device control 1 

DC2 

&#18; 

device control 2 

DC3 

&# 19; 

device control 3 

DC4 

&# 20; 

device control 4 

NAK 

&#21; 

negative acknowledge 

SYN 

&# 22; 

synchronize 

ETB 

&# 23; 

end transmission block 

CAN 

&#24; 

cancel 

EM 

&# 23; 

end of medium 

SUB 

&#2 6; 

substitute 

ESC 

&#27; 

escape 

FS 

&# 28; 

file separator 

GS 

&# 29; 

group separator 

RS 

&# 30; 

record separator 

US 

&#31; 

unit separator 

DEL 

&#127; 

delete (rubout) 
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APPENDIX G 


HTML ISO-8859-1 
REFERENCE 


Modern browsers support several character sets: 

►► ASCII character set (see Appendix F, “HTML ASCII Reference”) 

►► Standard ISO character sets (see Appendix E, “HTML Character 
Sets”) 

►► Unicode Transformation Format (UTF) (see Appendix E, “HTML 
Character Sets”) 

►► Mathematical symbols, Greek letters, and other symbols (see Appen¬ 
dix H, “HTML Symbol Entities Reference”) 

ISO-8859-1 

ISO-8859-1 is the default character set in most browsers. 

The first 128 characters of ISO-8859-1 make up the original ASCII character set 
(the numbers from 0-9, the uppercase and lowercase English alphabet, and some 
special characters). 

The higher part of ISO-8859-1 (codes from 160-255) contains the characters used 
in Western European countries and some commonly used special characters. 


Reserved Characters in HTML 

Some characters are reserved in HTML. For example, you cannot use the greater- 
than or less-than signs within your text because the browser could mistake them 
for markup. 

Entities are used to implement reserved characters or to express characters that can¬ 
not easily be entered with the keyboard. 

HTML processors must support the five special characters listed in the following 
table. 
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NOTE 


Entity names are case sensitive. 


CHARACTER 

ENTITY 

NUMBER 

ENTITY NAME 

DESCRIPTION 

M 

&#34; 

&quot; 

quotation mark 

T 

&# 39; 

&apos; (does not 
work in IE) 

apostrophe 

& 

&# 38; 

&amp; 

ampersand 

< 

&#60; 

&lt; 

less-than 

> 

&#6 2; 

&gt; 

greater-than 


ISO 8859-1 Symbols 


CHARACTER 

ENTITY 

NUMBER 

ENTITY NAME 

DESCRIPTION 


&#160; 

&nbsp; 

nonbreaking space 

i 

&#161; 

&iexcl; 

inverted exclama¬ 
tion mark 


&# 162; 

&cent; 

cent 

£ 

&# 163; 

&pound; 

pound 

□ 

&#164; 

&curren; 

currency 

¥ 

&#165; 

&yen; 

yen 

i 

i 

&#166; 

&brvbar; 

broken vertical bar 

§ 

&#167; 

&sect; 

section 


&#168; 

&uml; 

spacing diaeresis 

© 

&#169; 

&copy; 

copyright 

a 

&#170; 

&ordf; 

feminine ordinal 
indicator 

« 

&#171; 

&laquo; 

angle quotation 
mark (left) 

-1 

&#172; 

&not; 

negation 


&#173; 

&shy; 

soft hyphen 

® 

&#174; 

&reg; 

registered trade¬ 
mark 

- 

&#173; 

&macr; 

spacing macron 

o 

&#176; 

&deg; 

degree 

± 

&#177; 

&plusmn; 

plus-or-minus 
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CHARACTER 

ENTITY 

NUMBER 

ENTITY NAME 

DESCRIPTION 

2 

&#178; 

&sup2; 

superscript 2 

3 

&#179; 

&sup3; 

superscript 3 

' 

&#180; 

&acute; 

spacing acute 

P 

&#181; 

&micro; 

micro 

5 

&#182; 

&para; 

paragraph 


&#183; 

taniddot; 

middle dot 


&#184; 

&cedil; 

spacing cedilla 

1 

&#185; 

&sup1; 

superscript 1 

o 

&#186; 

&ordm; 

masculine ordinal 
indicator 

» 

&#187; 

taaquo; 

angle quotation 
mark (right) 

V4 

&#188; 

&fracl4; 

fraction 1/4 

V2 

&#189; 

&fracl2; 

fraction 1/2 

3 /4 

&#190; 

&frac34; 

fraction 3/4 

i 

&#191; 

&iquest; 

inverted question 
mark 

X 

&# 213; 

toimes; 

multiplication 

+ 

&#247; 

&divide; 

division 


ISO 8859-1 Characters 


CHARACTER 

ENTITY 

NUMBER 

ENTITY NAME 

DESCRIPTION 

A 

&#192; 

&Agrave; 

capital a, grave 
accent 

A 

&#193; 

&Aacute; 

capital a, acute 
accent 

A 

&#194; 

&Acirc; 

capital a, circum¬ 
flex accent 

A 

&#195; 

&Atilde; 

capital a, tilde 

A 

&#196; 

&Auml; 

capital a, umlaut 
mark 

A 

&#197; 

&Aring; 

capital a, ring 

JE 

&#198; 

&AElig; 

capital ae 

c 

&#199; 

&Ccedil; 

capital c, cedilla 
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CHARACTER 

ENTITY 

NUMBER 

ENTITY NAME 

DESCRIPTION 

E 

&#200; 

&Egrave; 

capital e, grave 
accent 

E 

&#201; 

&Eacute; 

capital e, acute 
accent 

E 

&#202; 

&Ecirc; 

capital e, circum¬ 
flex accent 

E 

&#203; 

&Euml; 

capital e, umlaut 
mark 

i 

&#204; 

&Igrave; 

capital i, grave 
accent 

I 

&#205; 

&Iacute; 

capital i, acute 
accent 

I 

&#206; 

&Icirc; 

capital i, circumflex 
accent 

I 

&#207; 

&Iuml; 

capital i, umlaut 
mark 

D 

&#208; 

&ETH; 

capital eth, Ice¬ 
landic 

N 

&#209; 

&Ntilde; 

capital n, tilde 

O 

&#210; 

&Ograve; 

capital o, grave 
accent 

o 

&#211; 

&Oacute; 

capital o, acute 
accent 

o 

&# 212; 

&Ocirc; 

capital o, circum¬ 
flex accent 

o 

&# 213; 

&Otilde; 

capital o, tilde 

o 

&#214; 

&Ouml; 

capital o, umlaut 
mark 

0 

&#216; 

&Oslash; 

capital o, slash 

u 

&#217; 

&Ugrave; 

capital u, grave 
accent 

u 

&#218; 

&Uacute; 

capital u, acute 
accent 

u 

&#219; 

&Ucirc; 

capital u, circum¬ 
flex accent 

u 

&#220; 

&Uuml; 

capital u, umlaut 
mark 
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CHARACTER 

ENTITY 

NUMBER 

ENTITY NAME 

DESCRIPTION 

Y 

&# 221; 

&Yacute; 

capital y, acute 
accent 

P 

&#222; 

&THORN; 

capital THORN, 
Icelandic 

& 

&#223; 

&szlig; 

small sharp s, Ger¬ 
man 

a 

&#224; 

&agrave; 

small a, grave 
accent 

a 

&#225; 

&aacute; 

small a, acute 

accent 

a 

&#226; 

&acirc; 

small a, circumflex 
accent 

a 

&#227; 

&atilde; 

small a, tilde 

a 

&#228; 

&auml; 

small a, umlaut 
mark 

a 

&#229; 

&aring; 

small a, ring 

ae 

&#230; 

&aelig; 

small ae 

9 

&#231; 

&ccedil; 

small c, cedilla 

e 

&#232; 

&egrave; 

small e, grave 
accent 

e 

&#233; 

&eacute; 

small e, acute 

accent 

e 

&#234; 

&ecirc; 

small e, circumflex 
accent 

e 

&#235; 

&euml; 

small e, umlaut 
mark 

1 

&#236; 

&igrave; 

small i, grave 
accent 

{ 

&#237; 

&iacute; 

small i, acute 

accent 

l 

&#238; 

&icirc; 

small i, circumflex 

accent 

l 

&#239; 

&iuml; 

small i, umlaut 
mark 

g 

&#240; 

&eth; 

small eth, Icelandic 

n 

&#241; 

&ntilde; 

small n, tilde 

6 

&#242; 

&ograve; 

small o, grave 
accent 
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CHARACTER 

ENTITY 

NUMBER 

ENTITY NAME 

DESCRIPTION 

6 

&#243; 

&oacute; 

small o, acute 

accent 

6 

&#244; 

&ocirc; 

small o, circumflex 
accent 

6 

&#245; 

&otilde; 

small o, tilde 

6 

&#246; 

&ouml; 

small o, umlaut 
mark 

0 

&#248; 

&oslash; 

small o, slash 

u 

&#249; 

&ugrave; 

small u, grave 
accent 

u 

&#250; 

&uacute; 

small u, acute 

accent 

u 

&#251; 

&ucirc; 

small u, circumflex 
accent 

ii 

&#252; 

&uuml; 

small u, umlaut 
mark 

y 

&#253; 

&yacute; 

small y, acute 
accent 

t> 

&#254; 

&thorn; 

small thorn, Ice¬ 
landic 

y 

&#255; 

&yuml; 

small y, umlaut 
mark 
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APPENDIX H 


HTML SYMBOL 
ENTITIES REFERENCE 


This entity reference includes mathematical symbols, Greek characters, various 
arrows, technical symbols, and shapes. 


NOTE 


Entity names are case sensitive. 


Math Symbols Supported by HTML 


CHARACTER 

ENTITY 

NUMBER 

ENTITY NAME 

DESCRIPTION 

V 

&#8704; 

&forall; 

for all 

d 

&#8706; 

&part; 

part 

3 

&#8707; 

&ex ists; 

exists 

0 

&#8709; 

&empty; 

empty 

V 

&#8711; 

&nabla; 

nabla 

e 

&#8712; 

&isin; 

isin 

$ 

&#8713; 

&notin; 

notin 

3 

&#8715; 

&ni; 

ni 

n 

&#8719; 

&prod; 

prod 

i 

&#8721; 

&sum; 

sum 

- 

&#8722; 

&minus; 

minus 

* 

&#8727; 

Sdowast; 

lowast 

V 

&#8730; 

toadic; 

square root 

oc 

&#8733; 

&prop; 

proportional to 

00 

&#8734; 

&infin; 

infinity 

z 

&#8736; 

&ang; 

angle 
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CHARACTER 

ENTITY 

NUMBER 

ENTITY NAME 

DESCRIPTION 

A 

&#8743; 

&and; 

and 

V 

&#8744; 

&or; 

or 

n 

&#8745; 

&cap; 

cap 

u 

&#8746; 

&cup; 

cup 

/ 

&#8747; 

&int; 

integral 


&#8756; 

&there4; 

therefore 

~ 

&#8764; 

&sim; 

similar to 

= 

&#8773; 

&cong; 

congruent to 

» 

&#8776; 

&asymp; 

almost equal 

* 

&#8800; 

&ne; 

not equal 

- 

&#8801; 

&equiv; 

equivalent 

< 

&#8804; 

&le; 

less or equal 

> 

&#8805; 

&ge; 

greater or equal 

c 

&#8834; 

&sub; 

subset of 

Z) 

&#8835; 

&sup; 

superset of 

C t 

&#8836; 

&nsub; 

not subset of 

c 

&#8838; 

&sube; 

subset or equal 

□ 

&#8839; 

&supe; 

superset or equal 

© 

&#8853; 

&oplus; 

circled plus 

© 

&#8855; 

&otimes; 

circled times 

1 

&#8869; 

&perp; 

perpendicular 


&#8901; 

&sdot; 

dot operator 


Greek Letters Supported by HTML 


CHARACTER 

ENTITY 

NUMBER 

ENTITY NAME 

DESCRIPTION 

A 

&# 913 ; 

&Alpha; 

Alpha 

B 

&# 914 ; 

&Beta; 

Beta 

r 

&# 915 ; 

&Gamma; 

Gamma 

A 

&# 916 ; 

&Delta; 

Delta 

E 

&# 917 ; 

&Epsilon; 

Epsilon 

Z 

&# 918 ; 

&Zeta; 

Zeta 
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CHARACTER 

ENTITY 

NUMBER 

ENTITY NAME 

DESCRIPTION 

H 

&#919; 

&Eta; 

Eta 

© 

&#920; 

&Theta; 

Theta 

1 

&#921; 

&Iota; 

Iota 

K 

&#922; 

&Kappa; 

Kappa 

A 

&#923; 

&Lambda; 

Lambda 

M 

&#924; 

&Mu; 

Mu 

N 

&# 925; 

&Nu; 

Nu 

“ 

&#926; 

&Xi; 

Xi 

0 

&#927; 

&Omicron; 

Omicron 

n 

&# 928; 

&Pi; 

Pi 

p 

&# 929; 

&Rho; 

Rho 


undefined 


Sigmaf 

i 

&#931; 

&Sigma; 

Sigma 

T 

&# 932; 

&Tau; 

Tau 

Y 

&# 933; 

&Upsilon; 

Upsilon 

d> 

&#934; 

&Phi; 

phi 

X 

&# 935; 

&Chi; 

Chi 

4J 

&#936; 

&Psi; 

Psi 

Q 

&#937; 

&Omega; 

Omega 





a 

&#945; 

&alpha; 

alpha 

p 

&#946; 

&beta; 

beta 

Y 

&#947; 

&gamma; 

gamma 

5 

&#948; 

&delta; 

delta 

£ 

&#949; 

&epsilon; 

epsilon 

5 

&# 930; 

&zeta; 

zeta 

n 

&#951; 

&eta; 

eta 

e 

&# 932; 

&theta; 

theta 

1 

&# 933; 

&iota; 

iota 

K 

&#954; 

&kappa; 

kappa 

A 

&#955; 

Sdambda; 

lambda 

V 

&#956; 

&mu; 

mu 

V 

&#957; 

&nu; 

nu 
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CHARACTER 

ENTITY 

NUMBER 

ENTITY NAME 

DESCRIPTION 

5 

&# 958; 

&xi; 

xi 

0 

&#959; 

&omicron; 

omicron 

TT 

&#960; 

&pi; 

Pi 

p 

&#961; 

&rho; 

rho 

s 

&#962; 

&sigmaf; 

sigmaf 

a 

&#963; 

&sigma; 

sigma 

T 

&#964; 

&tau; 

tau 

U 

&#965; 

&upsilon; 

upsilon 

9 

&#966; 

&phi; 

phi 

X 

&#967; 

&chi; 

chi 

9 

&#968; 

&psi; 

psi 

OJ 

&#969; 

&omega; 

omega 

& 

&#977; 

tohetasym; 

theta symbol 

Y 

&#978; 

&upsih; 

upsilon symbol 

UJ 

&#982; 

&piv; 

pi symbol 


Other Entities Supported by HTML 


CHARACTER 

ENTITY 

NUMBER 

ENTITY NAME 

DESCRIPTION 

CE 

&#338; 

&OElig; 

capital ligature OE 

oe 

&#339; 

&oelig; 

small ligature oe 

S 

&#352; 

&Scaron; 

capital S with caron 

s 

&#353; 

&scaron; 

small S with caron 

Y 

&#376; 

&Yuml; 

capital Y with 
diaeres 

/ 

&#402; 

&fnof; 

f with hook 


&#710; 

&circ; 

modifier letter 
circumflex accent 

- 

&#732; 

& tilde; 

small tilde 


&#8194; 

&ensp; 

en space 


&#8193; 

&emsp; 

em space 


&#8201; 

tohinsp; 

thin space 


&#8204; 

&zwnj; 

zero width non¬ 
joiner 
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CHARACTER 

ENTITY 

NUMBER 

ENTITY NAME 

DESCRIPTION 


&#8205; 

&zwj; 

zero width joiner 


&#8206; 

&lrm; 

left-to-right mark 


&#8207; 

&rlm; 

right-to-left mark 

- 

&#8211; 

&ndash; 

en dash 

— 

&#8212; 

&mdash; 

em dash 

‘ 

&#8216; 

Sdsquo; 

left single quota¬ 
tion mark 

’ 

&#8217; 

tosquo; 

right single quota¬ 
tion mark 

■ 

&#8218; 

&sbquo; 

single low-9 quota¬ 
tion mark 

£C 

&#8220; 

&ldquo; 

left double quota¬ 
tion mark 

55 

&#8221; 

tadquo; 

right double quota¬ 
tion mark 

» 

&#8222; 

&bdquo; 

double low-9 quo¬ 
tation mark 

t 

&#8224; 

&dagger; 

dagger 

t 

&#8225; 

&Dagger; 

double dagger 

• 

&#8226; 

&bull; 

bullet 


&#8230; 

&hellip; 

horizontal ellipsis 

%o 

&#8240; 

&permil; 

per mille 

t 

&#8242; 

&prime; 

minutes 

n 

&#8243; 

&Prime; 

seconds 

< 

&#8249; 

Sdsaquo; 

single left angle 
quotation 

> 

&#8250; 

tosaquo; 

single right angle 
quotation 

- 

&#8254; 

&oline; 

overline 

€ 

&#8364; 

&euro; 

euro 

TM 

&#8482; 

torade; 

trademark 

<- 

&#8592; 

Sdarr; 

left arrow 

t 

&#8593; 

&uarr; 

up arrow 

-> 

&#8594; 

&rarr; 

right arrow 

1 

&#8595; 

&darr; 

down arrow 
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CHARACTER 

ENTITY 

NUMBER 

ENTITY NAME 

DESCRIPTION 


&#8596; 

&harr; 

left right arrow 


&#8629; 

&crarr; 

carriage return 
arrow 

r 

&#8968; 

&lceil; 

left ceiling 

1 

&#8969; 

&rceil; 

right ceiling 

L 

&#8970; 

&lfloor; 

left floor 

J 

&#8971; 

tofloor; 

right floor 

0 

&#9674; 

&loz; 

lozenge 

A 

&#9824; 

&spades; 

spade 

A 

&#9827; 

&clubs; 

club 

V 

&#9829; 

&hearts; 

heart 

♦ 

&#9830; 

&diams; 

diamond 
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APPENDIX I 


HTML URL 
ENCODING 
REFERENCE 


URL encoding converts characters into a format that can be safely transmitted over 
the Internet. 


Web browsers request pages from Web servers by using a URL. The URL is the 
address of a Web page like: http://www.w3schools.com. 



For more information, see Chapter 27, “URL Encoding.” 


URL Encoding 

URLs can only be sent over the Internet using the ASCII character set. 

Because URLs often contain characters outside the ASCII set, the URL has to 
be converted. URL encoding converts the URL into a valid ASCII format. URL 
encoding replaces unsafe ASCII characters with “%” followed by two hexadecimal 
digits corresponding to the character values in the ISO-8839-1 character set. 


NOTE 


with a + sign. 


URLs cannot contain spaces. URL encoding normally replaces a space 


t>F°, more about ASCII, see Appendix F, “HTML ASCII Reference.” 

For more about ISO characters, see Appendix G, “HTML ISO-8859-1 
Reference.” 
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URL Encoding Functions 

In JavaScript, PHP, and ASP there are functions that can be used to URL encode 
a string. 

In JavaScript you can use the encodeURlO function. PHP has the rawurlen¬ 
code () function and ASP has the Server.URL Encode () function. 



To learn more about programming events, please read Learn JavaScript 
and Ajax with w3schools , also from Wiley Publishing, or visit the JavaS¬ 
cript tutorial at www.w3schools.com/js. 


NOTE 


In the following table, some numbers remain unassigned. 


URL Encoding Reference 


ASCII CHARACTER 

URL-ENCODING 

space 

%20 

! 

%21 

M 

%22 

# 

%23 

$ 

%24 

% 

%25 

& 

%2 6 

' 

%27 

( 

%28 

) 

%29 

* 

%2A 

+ 

%2B 

, 

%2C 

- 

%2D 


%2E 

/ 

%2F 

0 

%30 

1 

%31 

2 

%32 

3 

%33 
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Appendix I: HTML URL Encoding Reference 


ASCII CHARACTER 

URL-ENCODING 

4 

%34 

5 

%35 

6 

%3 6 

7 

%37 

8 

%38 

9 

%39 


%3A 

; 

%3B 

< 

%3C 

= 

%3D 

> 

%3E 

? 

%3F 

@ 

%40 

A 

%4l 

B 

%42 

C 

%43 

D 

%44 

E 

%45 

F 

%46 

G 

%47 

H 

%48 

I 

%49 

j 

%4A 

K 

%4B 

L 

%4C 

M 

%4D 

N 

%4E 

O 

%4F 

P 

%30 

Q 

%51 

R 

%32 

S 

%53 

T 

%54 

U 

%55 
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ASCII CHARACTER 

URL-ENCODING 

V 

%56 

W 

%57 

X 

%58 

Y 

%59 

Z 

%5A 

[ 

%5B 

\ 

%5C 

] 

%5D 

A 

%5E 


%5F 

' 

%60 

a 

%61 

b 

%62 

c 

%63 

a 

%64 

e 

%65 

f 

%66 

g 

%67 

h 

%68 

i 

%69 

j 

%6A 

k 

%6B 

i 

%6C 

m 

%6D 

n 

%6E 

o 

%6F 

P 

%70 

q 

%71 

r 

%72 

s 

%73 

t 

%74 

u 

%75 

V 

%76 

w 

%77 
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Appendix I: HTML URL Encoding Reference 


ASCII CHARACTER 

URL-ENCODING 

X 

%78 

y 

%79 

z 

%7A 

{ 

%7B 

1 

%7C 

} 

%7D 

- 

%7E 


%7F 

€ 

%80 


%81 

, 

%82 

f 

%83 

55 

%84 


%83 

t 

%86 

t 

%87 

* 

%88 

%o 

%89 

s 

%8A 

< 

%8B 

CE 

%8C 


%8D 

Z 

%8E 


%8F 


%90 

‘ 

%91 

5 

%92 

“ 

%93 

” 

%94 

• 

%93 

- 

%9 6 

— 

%97 

- 

%98 

TM 

%99 
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ASCII CHARACTER 

URL-ENCODING 

s 

%9A 

> 

%9B 

oe 

%9C 


%9D 

z 

%9E 

Y 

%9F 


%A0 

i 

%A1 


%A2 

£ 

%A3 


%A4 

¥ 

%A5 

l 

%A6 

§ 

%A7 


%A8 

© 

%A9 

a 

%AA 

« 

%AB 

-1 

%AC 

- 

%AD 

® 

%AE 

- 

%AF 

o 

%B0 

± 

%B1 

2 

%B2 

3 

%B3 

' 

%B4 

Y 

%B3 

5 

%B6 


%B7 


%B8 

1 

%B9 

o 

%BA 

» 

%BB 
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Appendix I: HTML URL Encoding Reference 


ASCII CHARACTER 

URL-ENCODING 

X /4 

%BC 


%BD 

3 /4 

%BE 

i 

%BF 

A 

%C0 

A 

%C1 

A 

%C2 

A 

%C3 

A 

%C4 

A 

%C5 

JE 

%C6 

Q 

%C7 

E 

%C8 

E 

%C9 

E 

%CA 

E 

%CB 

I 

%CC 

I 

%CD 

I 

%CE 

i 

%CF 

D 

%D0 

N 

%D1 

O 

%D2 

O 

%D3 

o 

%D4 

o 

%D3 

o 

%D6 


%D7 

0 

%D8 

u 

%D9 

u 

%DA 

u 

%DB 

u 

%DC 

Y 

%DD 
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ASCII CHARACTER 

URL-ENCODING 

P 

%DE 

& 

%DF 

a 

%E0 

a 

%E1 

a 

%E2 

a 

%E3 

a 

%E4 

a 

%E3 

ae 

%E6 

9 

%E7 

e 

%E8 

e 

%E9 

e 

%EA 

e 

%EB 

1 

%EC 

l 

%ED 

l 

%EE 

l 

%EF 

3 

%F0 

n 

%F1 

6 

%F2 

6 

%F3 

6 

%F4 

6 

%F5 

6 

%F6 


%F7 

0 

%F8 

U 

%F9 

u 

%FA 

u 

%FB 

ii 

%FC 

y 

%FD 

b 

%FE 

y 

%FF 
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INDEX 


Symbols 

177, 181 

A 

<a> element, 47 

<a> tag, 11, 17, 157, 177, 182, 189 
</a> tag, 13 

<abbr> tag, 38, 177, 181, 189 
abbreviations, formatting, 32 
accesskey attribute, 164, 186 
<acronym> tag, 38, 177, 181, 189 
acronyms, formatting, 32 
action attribute, 106 
<address> tag, 38, 177, 181, 189 
addresses, formatting, 31 
<a href=”default.htm”> tag, 13 
align attribute, 12 
aligning images, 59-60 
alignment 

cell content, 82-83 
text, 43-44 
alt attribute, 63 

ampersand, character entity, 149 
anchors, links, 47, 49, 117 
<applet> tag, 162, 178, 184, 189 
<area> tag, 178, 182, 189 
ASCII characters, 193, 196-200 

device control characters, 199-200 
printable characters, 196-199 
attributes, 11-13, 17-18 
accesskey, 164, 186 
action, 106 
align, 40, 44, 82 
alt, 63 

bgcolor, 40-41 

border, 68, 70, 88-89 

class, 18, 163, 185 

color, 20 

<content>, 155 

core, 163, 185 

dir, 163, 186 

event, 165-166, 187-188 

fonts, 137 

frame, 84-89 

height, 62 


href, 157 
id, 18, 163, 185 
keyboard, 164, 186 
lang, 163, 186 
language, 163, 186 
lowercase, 18 
<name>, 155 
name/value pairs, 17 
onabort, 188 
onblur, 166, 187 
onchange, 166, 187 
onclick, 166, 188 
ondblclick, 166, 188 
onfocus, 166, 187 
onkeydown, 166, 188 
onkeypress, 166, 188 
onkeyup, 166, 188 
onload, 165, 187 
onmousedown, 166, 188 
onmousemove, 166, 188 
onmouseout, 166, 188 
onmouseover, 166, 188 
onmouseup, 166, 188 
onreset, 166, 187 
onselect, 166, 187 
onsubmit, 166, 187 
onunload, 165, 187 
quotation marks, 17 
src, 55 

standard, 17-18, 163-164, 185-186 

style, 18, 39-44, 143, 146, 163, 185 

tabindex, 164, 186 

tag reference, 22 

target, 46, 48 

title, 18, 163, 185 

type, 91, 93 

unknown, 155 

values, defining, 17-18 

width, 62 

B 

<b> tag, 36, 178, 181, 189 

background colors, 41-42 
cells, 82 
tables, 80-81 
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background images, 58 
cells, 82 
tables 80-81 

<base> tag, 150, 152-153, 178, 183, 189 
<basefont> tag, 40, 146, 178, 183, 189 
<bdo> tag, 38, 178, 181, 189 
<big> tag, 36, 178, 181 
<blockquote> tag, 38, 178, 181, 190 
<body> element, 14—15, 41 
</body> tag, 2,15 

<body> tag, 2, 15, 126, 178, 180, 190 
bold text, 20 

formatting, 27-28 
border attribute, 68, 70, 88-89 
borders 

frames, resizing, 128 
tables, 68-71, 84-89 
<br> element, 16, 24 
<br /> tag, 13, 24, 178, 181, 190 
brackets, 21 
browsers 

knowledge, 1 
older, 161 

support, colors, 113 
windows, links, 46 
bullets, 90-91 

<button> tag, 110, 178, 182, 190 
buttons, 104-105, 107-109 
buttons, radio, 102, 108-109 

c 

captions, tables, 74-75 
<caption> tag, 89, 178, 183, 190 
case sensitivity, 18 
cells, 75-76 

background colors, 82 
background images, 82 
content, alignment, 82-83 
empty, 72-74 
padding, 78-79 
spacing, 79-80 
cent, character entity, 149 
<center> tag, 40, 146, 178, 181, 190 
character entities, 147-149 
character sets, 193-195 
ASCII characters, 193 
ISO characters, 194-195 
ISO-8 8 5 9-1 characters, 193 
Unicode characters, 195 
character widths, formatting, 29 


checkboxes, 101, 107-108 
citation tags, 38 

<cite> tag, 36, 38, 178, 181, 190 
class attribute, 18, 163, 185 
closing tags, 13, 16 
code, source, 22 

<code> tag, 36-37, 178, 181, 190 
<col> tag, 89, 178, 183, 190 
<colgroup> tag, 89, 178, 183, 190 
color 

background 41-42 
browser support, 113 

font, 42-43, 138-139 
gray shades, 114-115 
hexadecimal notation, 111-112 
names, standard, 113 
RGB, 111 
values, 111-112 
Web Safe Colors, 114 
Color Picker, 8 
column sizes, frameset, 128 
comments, 21 
computer output tags, 30 
<content> attribute, 155 
copyright, character entity, 149 
core attributes, 185 
CSS styles, 142-146 
<basefont> tag, 146 
<center> tag, 146 
<div> tag, 146 
external style sheet, 144 
<font> tag, 146 
<head> section, 142-143 
inline styles, 146 
internal style sheets, 145 
<link> tag, 144, 146 
links, underlined, 143 
<span> tag, 146 
style attribute, 143, 146 
style sheets, external, 144-145 
style sheets, internal, 145 
style sheets, linked, 144 
<style> tags, 145-146 

D 

<dd> tag, 95-96, 98, 178, 183, 190 
definition lists, 95-96, 118 
definition tags, 38 
<del> tag, 36, 178, 181, 190 
deleted text, 35 
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deprecated tags, 36, 40 

device control characters, ASCII, 199-200 

<dfn> tag, 36, 38, 178, 181, 190 

dir attribute, 163, 186 

<dir> tag, 98, 178, 183, 190 

<div> tag, 146, 178, 183, 190 

<dl> tag, 93, 98, 178, 183, 190 

doctypes, 189-192 

<!DOCTYPE> tag, 133, 177, 180 

documents, basic, 2, 116 

domain, URLs, 157 

downloading, ftp, 158 

Dreamweaver, 7 

drop-down lists, 102-103 

<dt> tag, 95, 98, 178, 183, 190 


E 


editors, 7 
elements, 13-16 
<address>, 119 
anchors, 117 
<blockquote>, 119 
<body>, 41 
doctypes, 189-192 
empty, 16 
end tags, 15 
forms, 99 

head element, 150-153 
<base> tag, 150, 152-153 
<!DOCTYPE> tag, 153 
<head> tag, 153 
<link> tag, 150, 153 
<meta> tag, 150, 153 
<p> element, 151 
<script> tag, 150 
<style> tag, 150 
tags, 150-153 
<title> tag, 150-151, 153 
headings, 116 
image, 117 
links, 117 
lowercase tags, 16 
meta, 153-156 

<content> attribute, 155 
keywords, 154-155 
<name> attribute, 155 
search engines, 154-155 
unknown attributes, 155 
user redirection, 155-156 
nested, 14 


<p>, 42, 151 
<tbody>, 74 
<tfoot>, 74 
text, 116 
<thead>, 74 
syntax, 13 

within elements, 76-77 
<em> tag, 36, 178, 181, 190 
e-mail addresses, links, 52-53 
e-mails, forms, 109-110 
emphasized text, 28 
empty cells, 72-74 
empty elements, 16 
empty lines, 20, 23 
encoding, URLs, 167-168 
end tags, see also closing tags, 14-15, 23 
entities, 119 

euro, character entity, 149 
event attributes, 165-166, 187-188 
body events, 187 
form element events, 166, 187 
frameset events, 187 
image events, 188 
keyboard events, 166, 188 
mouse events, 166, 188 
window events, 165 
exclamation points, 21 
extensions, 8 
external links, 45—46 
external style sheet, 144 
extra lines, 24-26 
extra spaces, 24-26 


F 

families, fonts, 42-43 
<fieldset> tag, 110, 178, 182, 190 
fieldset, 105 
file extensions, 8 
file validation, 141 
filenames, URLs, 158 
floating images, 61 
fonts, 136-139 
attributes, 137 
color, 42-43, 138-139 

controlling, 137—139 

families, 42-43 
size, 42-43, 138-139 
styles, 137-139 
style sheets, 139 

<font> tag, 40, 136-139, 146, 178, 181, 190 
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form element events, 166 
<form> tag, 100, 110, 178, 182, 190 
formatting, text, 27-38 
abbreviations, 32 
addresses, 31 
acronyms, 32 
<b> tag, 27 
bold text, 27-28 
character widths, 29 
citation tags, 38 
computer output tags, 30 
definition tags, 38 
deleted text, 33 
deprecated tags, 36 
emphasized text, 28 
<i> tag, 27 
inserted text, 33 
italic text, 27-28 
line breaks, 29 
phrase tags, 36 
preformatted text, 29 
quotations, 34, 38 
spaces, 29 

strikethrough 35, 35 
subscript text, 28 
superscript text, 28 
tags, 27, 36 
text direction, 33 
underscore text, 35 
forms, 99-110, 118-119 
action attribute, 106 
<button> tag, 110 

buttons, 104-105, 107-109 
checkboxes, 101, 107-108 
drop-down lists, 102-103 
elements, 99 

e-mails, sending, 109-110 
<fieldset> tag, 105, 110 
<form> tag, 100, 110 
<input> tag, 100, 110 
<isindex> tag, 110 
<legend> tag, 110 
<optgroup> tag, 110 
<option> tag, 110 
pages, adding, 106-107 
radio buttons, 102, 108-109 
<select> tag, 110 
<textarea> tag, 110 
textarea input control, 104 
text areas, 104 


text fields, 100-101 
frame attribute, 84-89, 188 
frames, 125-135 

borders, resizing, 128 
column sizes, 128 
disadvantages, 125 
<frame> tag, 127-128, 135 
<frameset> tag, 125-127, 135 
horizontal frameset, 126-127 
vertical frameset, 125-126 
<iframe> tag, 135 
inline, 132-133 
jump to, 133-134 
jump to sections, 134-135 
mixed frameset, 130 
navigation, 131-132, 135 
<noframes> tag, 128-129, 135 
noresize attribute, 131 
sections, jumping to, 134-135 
<frame> tag, 127-128, 135, 179, 182, 190 
<frameset> tag, 125-127, 135, 190 
horizontal frameset, 126-127 
vertical frameset, 125-126 
FrontPage, 7 
fundamentals, 9-12 
headings, 9-10 
images, 11-12 
links, 11 
paragraphs, 10 

G 

gray shades, 114-115 

greater than, character entity, 149 

Greek symbols, 208—210 

H 

<hl> tag, 2, 9, 19, 179, 181, 190 
<h6> tag, 9, 19, 179, 181, 190 
head element, 150-153 
<base> tag, 150, 152-153 
<!DOCTYPE> tag, 153 
<head> tag, 153 
<link> tag, 150, 153 
<meta> tag, 150, 153 
<p> element, 151 
<script> tag, 150 
<stylo tag, 150 
tags, 150-153 
<title> tag, 150-151, 153 
<head> section, 142-143 


224 



Index 


<head> tag, 153, 179, 183, 190 
headings, 9-10, 19-20 
elements, 116 
tables, 71-72 
height attribute, 62 
hexadecimal notation, 111-112 
horizontal frameset, 126—127 
horizontal rules, 20 
host, URLs, 157 
href attribute, 47, 49, 157 
<hr /> tag, 20, 179, 181, 190 
HTM extension, 8 
HTML, defined, 1 
HTML 3.2, 140 
HTML 4.0, 140-141 
HTML Color Picker, 8 
HTML editors, 7 
<html> element, 15 
HTML extension, 8 
<html> tag, 2, 15, 179-180, 190 
hyperlinks, 47 


internal style sheets, 145 
Internet Explorer, 2 

Internet Information Server (IIS), 169-171 
<isindex> tag, 110, 179, 182 
ISO characters, 194-195 
ISO-8859-1 characters, 193, 201-206 
reserved characters, 201-202 
symbols, 202-203 
italic text, 27-28 


J 

jump to frameset, 133-134 
jump to sections, 134-135 

K 

<kbd> tag, 36-37, 179, 181, 191 
keyboard attributes, 186 
keyboard events, 166 
keywords, 154-155 


L 


I 

<i> tag, 36, 179, 181, 190 
id attribute, 18, 163, 185 
<iframe> tag, 135, 179, 182, 190 
IIS, see Internet Information Server 
image maps, 63-64 
images, 11-12, 55-64, 117 
aligning, 59-60 
alt attribute, 63 
background, 58 
floating, 61 
height attribute, 62 
<img> tag, 55-56 
inserting, 57 

links, 54-55 
maps, 63-64 
scaling, 62 
src attribute, 55 
size, adjusting, 62 
width attribute, 62 
<img> tag, 11, 55-56, 179, 182, 190 
inline frames, 132-133 
inline styles, 146 

<input> tag, 100, 110, 179, 182, 190 
<ins> tag, 36, 179, 181, 190 
inserted images, 57 
inserted text, 35 
internal links, 45-46 


<label> tag, 179, 182, 191 
language attribute, 163, 186 
layout, tables, 123-124 
<table> tag, 123 

<legend> tag, 110, 179, 182, 191 
less than, character entity, 149 
<li> tag, 91,93, 98, 179, 183, 191 
line breaks, 10, 24, 29 
lines, see rules 
lines 

empty, 20, 23 
extra, 24-26 

<link> tag, 144, 146, 150, 153, 179, 182, 191 
links, 11,45-54, 117 
<a> element, 47 
anchors, 47, 49 
browser windows, 46 
e-mail addresses, 52-53 
external, 45—46 
href attribute, 47, 49 
hyperlinks, 47 
images, 54-55 
internal, 45-46 
mailto:, 52-53 
name attribute, 49 
opening, 46 
same page, 50-51 
start tag, 47 
subfolder references, 49 
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syntax, 47 

target attribute, 46, 48 
underlined, 143 
URLs, 138-139 
<listing> tag, 37 
lists, 90-98 

bullets, 90-91 
<dd> tag, 95-96, 98 
definition, 95-96, 118 
<dir> tag, 98 
<dl> tag, 95, 98 
<dt> tag, 95, 98 
<li> tag, 91, 93, 98 
<menu> tag, 98 
nested, 96-98 
<ol> tag, 93, 98 
ordered, 93, 117 
type attribute, 91, 93 
<ul> tag, 91, 98 
unordered, 90-92, 117 
logical styles, 117 
lowercase attributes, 18 
lowercase tags, 16 

M 

mailto: links, 52-53 
maps, image, 63-64 
<map> tag, 179, 182, 191 
markup tags, 8 
math symbols, 207-208 
<menu> tag, 98, 179, 183, 191 
meta element, 153-156 
<content> attribute, 155 
keywords, 154-155 
<name> attribute, 155 
search engines, 154-155 
unknown attributes, 155 
user redirection, 155-156 
<meta> tag, 150, 153, 179, 183, 
mixed frameset, 130 
mouse events, 166 
Mozilla Firefox, 2, 72 

N 

name attribute, 49, 155 
names, standard, 113 
name/value pairs, 17 
navigation frame, 131-132, 135 
nested elements, 14 

<body> element, 14-15 


<html> element, 15 
<p> element, 14 
nested lists, 96-98 
newsgroups, accessing, 158 
<noframes> tag, 128-129, 135, 179, 182, 191 
nonbreaking spaces, 73, 148 
noresize attribute, frameset, 131 
<noscript> tag, 162, 179, 184, 191 
Notepad, 7-8 


o 

<object> tag, 162, 179, 184, 191 
<ol> tag, 93, 98, 179, 182, 191 
onabort attribute, 188 
onblur attribute, 166, 187 
onchange attribute, 166, 187 
onclick attribute, 166, 188 
ondblclick attribute, 166, 188 
onfocus attribute, 166, 187 
onkeydown attribute, 166, 188 
onkeypress attribute, 166, 188 
onkeyup attribute, 166, 188 
onload attribute, 165, 187 
onmousedown attribute, 166, 188 
onmousemove attribute, 166, 188 
onmouseout attribute, 166, 188 
onmouseover attribute, 166, 188 
onmouseup attribute, 166, 188 
onreset attribute, 166, 187 
onselect attribute, 166, 187 
onsubmit attribute, 166, 187 
onunload attribute, 165, 187 
opening links, 46 
opening tags, 13 

<optgroup> tag, 110, 179, 182, 191 
<option> tag, 110, 179, 182, 191 
ordered, 93, 117 
output, paragraphs, 24-25 

P 

<p> element, 14, 42, 151 
<p> tag, 2, 13, 23, 179, 181, 191 
padding, cells, 78-79 
page links, 50-51 
pages, adding to forms, 106-107 
pages, scripts, 160 
paragraphs, 10, 23-26 
end tags, 23 
line breaks, 24 
output, 24-25 
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<param> tag, 162, 179, 184, 191 
path, URLs, 158 

Personal Web Server (PWS), 170-172 

phrase tags, 36 

physical styles, 117 

<plaintext> tag, 37 

:port, URLs, 157 

pound, character entity, 149 

<pre> tag, 37, 179, 181, 191 

preformatted text, 29 

primes, 17 

printable characters, ASCII, 196-199 
professional Web servers, 172 
PWS, see Personal Web Server 

Q 

<q> tag, 38, 180-181, 191 
quizzes, 8 

quotation marks, attributes, 17 
quotations, formatting, 34, 38 

R 

radio buttons, 102, 108-109 
registered trademark, character entity, 149 
reserved characters, ISO-8859-1, 201-202 
RGB, 111 
rules, 20-21 

s 

<s> tag, 36, 40, 180-181, 191 
<samp> tag, 36-37, 180-181, 191 
scaling images, 62 
schemes, URLs, 157-158 
scripts, 160-162 
<applet> tag, 162 
browsers, 161 
<noscript> tag, 162 
<object> tag, 162 
pages, inserting, 160 
<param> tag, 162 
<script> tag, 160-162 
tags, 162 

<script> tag, 150, 160-162, 180, 184, 191 

search engines, 20, 154-155 

section, character entity, 149 

sections, jumping to, 134-135 

<select> tag, 110, 180, 182, 191 

size 

fonts, 42-43, 138-139 
images, 62 


<small> tag, 36, 180-181, 191 
slashes, subfolder references, 49 
source code, 22 
source names, 12 
source sizes, 12 
spaces, 10, 24-26, 29 
spacing, cells, 79-80 
<span> tag, 146, 180, 183, 191 
src attribute, 55 

standard attributes, 17-18, 185-186 

start tags, see also opening tags, 13-14, 47 

<strike> tag, 36, 40, 180-181, 191 

strikethrough text, 35, 35 

<strong> tag, 36, 180-181, 191 

style attribute, 18, 39-34, 143, 146, 163, 185 

styles, 39-44 

background color, 41-42 
CSS, 142-146 

<basefont> tag, 146 
<center> tag, 146 
<div> tag, 146 
external style sheet, 144 
<font> tag, 146 
<head> section, 142-143 
inline styles, 146 
internal style sheets, 145 
<link> tag, 144, 146 
links, underlined, 143 
<span> tag, 146 
style attribute, 143, 146 
style sheets, external, 144-145 
style sheets, internal, 145 
style sheets, linked, 144 
deprecated tags/attributes, 40 
fonts, 137-139 
font color, 42-43, 138-139 
font family, 42-43 
font size, 42-43, 138-139 
logical, 117 
physical, 117 
style attribute, 39-44 
text alignment, 43—44 
style sheets, 139 
external, 144-145 
internal, 145 
linked, 144 

<style> tag, 145-146. 150, 180, 183, 191 
<sub> tag, 36, 180-181, 191 
<sup> tag, 36, 180-181, 191 
subfolder references, links, 49 
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subscript text, 28 
superscript text, 28 
symbol entities, 207-211 
Greek symbols, 208-210 
math symbols, 207-208 
miscellaneous, 210-211 
symbols, ISO-8859-1, 202-203 
syntax, elements, 13 

T 

tabindex attribute, 164, 186 
tables, 118 

align attribute, 82 
background colors, 80-81 
background images, 80-81 
border attribute, 68, 70, 88-89 
borders, 68-71, 84-89 
captions, 74-75 
<caption> tag, 89 
cells, 75-76 

background colors, 82 
background images, 82 
content, alignment, 82-83 
empty, 72-74 
padding, 78-79 
spacing, 79-80 
<col> tag, 89 
<colgroup> tag, 89 
creation, 65-68 

elements within elements, 76-77 
frame attribute, 84-89 
headings, 71-72 
layout, 123-124 
nonbreaking spaces, 73 
table data, 65 
<table> tag, 65-66, 89 
tags within, 76-77 
<tbody> element, 74 
<tbody> tag, 89 
<td> tag, 65-66, 89 
<tfoot> element, 74 
<tfoot> tag, 89 
<th> tag, 71, 89 
<thead> element, 74 
<thead> tag, 89 
<tr> tag, 65-66, 89 
table data, 65 

<table> tag, 65-66, 89, 123, 180, 183, 191 
tags, 177-180 

177, 181 


<a>, 11, 17, 157, 177, 182, 189 
</a>, 13 

<abbr>, 38, 177, 181, 189 
<acronym>, 38, 177, 181, 189 
<address>, 38, 177, 181, 189 
<a href=”default.htm”>, 13 
<applet>, 162, 178, 184, 189 
<area>, 178, 182, 189 
<b>, 36, 178, 181, 189 
<base>, 150, 152-153, 178, 183, 189 
<basefont>, 40, 146, 178, 183, 189 
<bdo>, 38, 178, 181, 189 
<big>, 36, 178, 181 
<blockquote>, 38, 178, 181, 190 
</body>, 2, 15 

<body>, 2, 15, 126, 178, 180, 190 
<br />, 13,24, 178, 181, 190 
<button>, 110, 178, 182, 190 
<caption>, 89, 178, 183, 190 
<center>, 40, 146, 178, 181, 190 
<cite>, 36, 38, 178, 181, 190 
closing, 13 

<code>, 36-37, 178, 181, 190 
<col>, 89, 178, 183, 190 
<colgroup>, 89, 178, 183, 190 
<dd>, 95-96, 98, 178, 183, 190 
defined, 2 

<del>, 36, 178, 181, 190 

<dfn>, 36, 38, 178, 181, 190 

<dir>, 98, 178, 183, 190 

<div>, 146, 178, 183, 190 

<dl>, 95, 98, 178, 183, 190 

<!DOCTYPE>, 153, 177, 180 

<dt>, 95, 98, 178, 183, 190 

<em>, 36, 178, 181, 190 

end, 14-15,23 

<fieldset>, 110, 178, 182, 190 

<font>, 40, 136-139, 146, 178, 181, 190 

<form>, 100, 110, 178, 182, 190 
formatting, 27, 36 

<frame>, 127-128, 135, 179, 182, 190 
<frameset>, 125-127, 135, 179, 182, 190 
<hl>, 2, 9, 19, 179, 181, 190 
<h6>, 9, 19, 179, 181, 190 
<head>, 153, 179, 183, 190 
head, 150-153 

<hr />, 20, 179, 181, 190 
<html>, 2, 15, 179-180, 190 
<i>, 36, 179, 181, 190 
<iframe>, 135, 179, 182, 190 
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<img>, 11, 55-56, 179, 182, 190 
<input>, 100, 110, 179, 182, 190 
<ins>, 36, 179, 181, 190 
<isindex>, 110, 179, 182 

<kbd>, 36-37, 179, 181, 191 

<label>, 179, 182, 191 

<legend>, 110, 179, 182, 191 

<li>, 91,93, 98, 179, 183, 191 

<link>, 144, 146, 150, 153, 179, 182, 191 

<listing>, 37 
lowercase, 16 
<map>, 179, 182, 191 
markup, 8 

<menu>, 98, 179, 183, 191 
<meta>, 150, 153, 179, 183, 191 
<noframes>, 128-129, 135, 179, 182, 191 
<noscript>, 162, 179, 184, 191 
<object>, 162, 179, 184, 191 
<ol>, 93, 98, 179, 182, 191 
opening, 13 

<optgroup>, 110, 179, 182, 191 
<option>, 110, 179, 182, 191 
<p>, 2, 13, 23, 179, 181, 191 
<param>, 162, 179, 184, 191 
<plaintext>, 37 
<pre>, 37, 179, 181, 191 
<q>, 38, 180-181, 191 
<s>, 36, 40, 180-181, 191 
<samp>, 36-37, 180-181, 191 
script, 162, 191 

<script>, 150, 160-162, 180, 184 
<select>, 110, 180, 182, 191 
<small>, 36, 180-181, 191 
<span>, 146, 180, 183, 191 
start, 13-14 

<strike>, 36, 40, 180-181, 191 
<strong>, 36, 180-181, 191 

<style>, 145-146. 150, 180, 183, 191 
<sub>, 36, 180-181, 191 
<sup>, 36, 180-181, 191 
<table>, 65-66, 89, 123, 180, 183, 191 
<tbody>, 89, 180, 183, 191 
<td>, 65-66, 89, 180, 183, 191 
<textarea>, 110, 180, 182 
<tfoot>, 89, 180, 183, 192 
<th>, 71, 89, 180, 183, 192 
<thead>, 89, 180, 183, 192 
<title>, 150-151, 153, 180, 183, 192 
<tr>, 65-66, 89, 180, 183, 192 

<tt>, 37, 180-181, 192 


<u>, 36, 40, 180, 182, 192 
<ul>, 91, 98, 180, 182, 192 
<var>, 36-37, 180, 182, 192 
within tables, 76-77 
<xmp>, 37, 180, 182 
target attribute, 46, 48 
<tbody> element, 74 
<tbody> tag, 89, 180, 183, 191 
<td> tag, 65-66, 89, 180, 183, 191 
test Web, 8 

testing, Web servers, 171 
<textarea> tag, 110, 180, 182 
text alignment, 43-44 
text areas, 104 
text direction, 33 
text elements, 116 
text fields, 100-101 
text formatting, 27-38 
abbreviations, 32 
addresses, 31 
acronyms, 32 
<b> tag, 27 
bold text, 27-28 
character widths, 29 
citation tags, 38 
computer output tags, 30 
definition tags, 38 
deleted text, 35 
deprecated tags, 36 
emphasized text, 28 
<i> tag, 27 
inserted text, 35 
italic text, 27-28 
line breaks, 29 
phrase tags, 36 
preformatted text, 29 
quotations, 34, 38 
spaces, 29 

strikethrough 35, 35 
subscript text, 28 
superscript text, 28 
tags, 27, 36 
text direction, 33 
underscore text, 35 
textarea input control, 104 
<tfoot> element, 74 
<tfoot> tag, 89, 180, 183, 192 
<th> tag, 71,89, 180, 183, 192 
<thead> element, 74 
<thead> tag, 89, 180, 183, 192 
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title attribute, 18, 163, 183 

<title> tag, 130-131, 153, 180, 183, 192 

<tr> tag, 65-66, 89, 180, 183, 192 

<tt> tag, 37, 180-181, 192 

type attribute, 91, 93 

u 

<u> tag, 36, 40, 180, 182, 192 
<ul> tag, 91,98, 180, 182, 192 
underscore text, 35 
Unicode characters, 195 
uniform resource locator, see URLs 
unknown attributes, 155 
unordered lists, 90-92, 117 
URLs, 157-159 
<a> tag, 157 
domain, 157 
downloading, ftp, 158 
encoding, 167-168 
filename, 158 
host, 157 
href attribute, 157 
links, 158-159 
newsgroups, accessing, 158 
path, 158 
:port, 157 
schemes, 157-158 
user redirection, 155-156 

V 

validation, file, 141 
values 

attributes, 17-18 
colors, 111-112 

<var> tag, 36-37, 180, 182, 192 
version 4.0, 140—141 
vertical frameset, 125-126 
View Page Source (Firefox), 22 
View Source (Internet Explorer), 22 
visual breaks, 20 


w 

yen, character entity, 149 
W3C, 16, 18, 113, 156 

w3schools.com, 1 
Web Safe Colors, 114 
Web pages, 2 
Web servers, 7, 169-172 

Internet Information Server (IIS), 169-171 
Personal Web Server (PWS), 170-172 
professional, 172 
testing, 171 

Windows 7, IIS, 170-171 
Windows 95, PWS, 172 
Windows 98, PWS, 172 
Windows 2000, IIS, 171 
Windows NT, PWS, 172 
Windows support, 170 
Windows Vista, IIS, 170-171 
Windows XP, IIS, 171 
Web sites, 7 
width attribute, 62 
window events, 165 
Windows 7, IIS, 170-171 
Windows 95, PWS, 172 
Windows 98, PWS, 172 
Windows 2000, IIS, 171 
Windows NT, PWS, 172 
Windows support, 170 
Windows Vista, IIS, 170-171 
Windows XP, IIS, 171 
World Wide Web Consortium, see W3C 

x-z 

XML, 16 

<xmp> tag, 37, 180, 182 
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There’s no faster, easier way 
to learn HTML and CSS 

If you want to start creating Web pages right away, there's no better 
way to get started than by learning HTML and CSS. w3schools has 
perfected a straightforward tutorial approach that gives you what 
you need to know in manageable lessons, liberally supported with 
examples. You'll find that tried-and-true format in this book, along 
with a detailed reference section that you will use again and again. 

You will learn: 

* Basics of HTML tags and how to get started 

* How to format text 

* HTML links, lists, tables, styles, and images 

* Layout, frames, and fonts 

* The advantages of HTML 4.0 

* HTML CSS styles 

* Meta elements, URLs, scripts, and attributes 



w3schools is a leading Web destination for learning key Web 
technologies online. Founded in 1999, it receives more than 
10 million unique visitors each month, w3schools tutorials are 
reguired reading in more than 100 high schools and universities, 
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